Countdown from Database (date)

Question

So what I would like to do is make a countdown based on the date from mysql and make it going down in live mode without the need to refresh.

Code:

<?php 
    $date = strtotime($row_tournaments['date']);
    $remaining = $date - time();
    $days_remaining = floor($remaining / 86400);
    $hours_remaining = floor(($remaining % 86400) / 3600);
    $minutes_remaining = floor(($remaining % 3600) / 60);
    $seconds_remaining = ($remaining % 60);
    echo "<p>$days_remaining <span style='font-size:.3em;'>dias</span> $hours_remaining <span style='font-size:.3em;'>horas</span> $minutes_remaining <span style='font-size:.3em;'>minutos</span> $seconds_remaining <span style='font-size:.3em;'>segundos</span></p>";
?>

This works fine but I need to refresh so I can see the time going down.

$date = strtotime($row_tournaments['date']);

This is geting the date from database which the format is:

2015-10-11 08:15:31

Have you looked at the examples here on SO? http://stackoverflow.com/search?q=javascript+countdown For example, http://stackoverflow.com/questions/1191865/code-for-a-simple-javascript-countdown-timer has many different answers that can be modified to fit your needs. — Sean, Oct 03 '15 at 15:27
i already tried search and use some others code but i still couldnt do it i even google it before get help :S. Anyways ty for the tip. Cumps. — Bruno, Oct 03 '15 at 15:29
So are you going to post some code that you tried, but that didn't work. Or are you expecting us to give you free code? You could always pay someone to do the work if you don't want to show your effort. — Sean, Oct 03 '15 at 15:30
@Bruno Could you post the other code you tried and why it didn't work? — ASCIIThenANSI, Oct 03 '15 at 15:31
This code works fine but i cant get date value from database and put it at new Date(); and that will count when i refresh the page it will repeat the countdown. More specific i would like to join both codes that final result would be get date from database and it make properly count from (remaining time - today). — Bruno, Oct 03 '15 at 15:39
Possible duplicate of [Countdown from specific date from mysql](http://stackoverflow.com/questions/32922518/countdown-from-specific-date-from-mysql) — andrewsi, Oct 09 '15 at 00:37

Gabriel Rodriguez · Accepted Answer · 2015-10-03T15:51:24.213

3

var initialTime = 194801;//Place here the total of seconds you receive on your PHP code. ie: var initialTime = <? echo $remaining; ?>;

var seconds = initialTime;
function timer() {
    var days        = Math.floor(seconds/24/60/60);
    var hoursLeft   = Math.floor((seconds) - (days*86400));
    var hours       = Math.floor(hoursLeft/3600);
    var minutesLeft = Math.floor((hoursLeft) - (hours*3600));
    var minutes     = Math.floor(minutesLeft/60);
    var remainingSeconds = seconds % 60;
    if (remainingSeconds < 10) {
        remainingSeconds = "0" + remainingSeconds; 
    }
    document.getElementById('countdown').innerHTML = days + "dias " + hours + "horas " + minutes + "minutos " + remainingSeconds+ "segundos";
    if (seconds == 0) {
        clearInterval(countdownTimer);
        document.getElementById('countdown').innerHTML = "Completed";
    } else {
        seconds--;
    }
}
var countdownTimer = setInterval('timer()', 1000);

<span id="countdown" class="timer"></span>

edited Oct 03 '15 at 15:51

answered Oct 03 '15 at 15:41

Gabriel Rodriguez

1,163
10
23

Oh thanks alot but the format of my date is: 2015-10-11 08:15:31 How can i convert this into seconds and paste it there?! var initialTime = 172801; – Bruno Oct 03 '15 at 15:47
You already have it in seconds on your `$remaining` PHP variable, `var initialTime = echo $remaining; ?>;` ...see the comment example on my answer beside the initialTime variable – Gabriel Rodriguez Oct 03 '15 at 15:48
Just one thing is there any way to style inside your code like increase the font-size?! – Bruno Oct 03 '15 at 15:57
Of course, you can put in the `document.getElementById('countdown').innerHTML =` part any html code you want, just like the style you had on your php echo code line, just replace the php variables with the javascript variables – Gabriel Rodriguez Oct 03 '15 at 16:02
I already style it and its working fine but i would like to know if this is possible. So i have 2 dates into database one 2/10/2015 and the other 5/10/2015 and what would like to do is since the 2/10/2015 already passed i would like that counter automatically started couting how many days to 5/10/2015 im trying figured it out and cant put it work. It shows negative numbers since 2/10/2015 already passed. Thanks for your support. – Bruno Oct 03 '15 at 18:57
Just replace the `date()` function your PHP code line `$remaining = $date - time();` for `$remaining = strtotime($date2) - strtotime($date);`...where `$date2` and `$date` are your dates values. and use the `strtotime` function if they are in string format – Gabriel Rodriguez Oct 03 '15 at 19:13
humm i guess i explain it wrongly, what i want to do is when the date specific reach the end starts couting again but now to the most close date and not keep on the same date and going backwards, geting ñegative values. – Bruno Oct 03 '15 at 19:17

score 1 · Answer 2 · answered Nov 28 '15 at 21:34

is better you insert only the end time in mysql db and and assign a variable to some like dis

    $sql = "SELECT endtime FROM post";
$result = mysqli_query($conn, $sql);
if (mysqli_num_rows($result) > 0) {
$Row = (mysqli_fetch_assoc($result));
$th = $Row['endtime'];    
}
echo $th
?>

then use your javascript to run the countdown something like dis

//let get todays date here
var today = new Date();
var DD = today.getDate();
var MM = today.getMonth()+1; //January is 0!
var YYYY = today.getFullYear();
//let get the Difference in Sec btw the two dates
var _DateFromDBProgEndDate = '<?php echo $th; ?>';
var ProgEndTime = new Date(_DateFromDBProgEndDate);
var TodayTime = new Date();

var differenceTravel = ProgEndTime.getTime()- TodayTime.getTime() ;
var seconds = Math.floor((differenceTravel) / (1000));
////////////////////////////////
var SecDiffFromToday = seconds;
var seconds = SecDiffFromToday;
function timer() {
    var days        = Math.floor(seconds/24/60/60);
    var hoursLeft   = Math.floor((seconds) - (days*86400));
    var hours       = Math.floor(hoursLeft/3600);
    var minutesLeft = Math.floor((hoursLeft) - (hours*3600));
    var minutes     = Math.floor(minutesLeft/60);
    var remainingSeconds = seconds % 60;
    if (remainingSeconds < 10) {
        remainingSeconds = "0" + remainingSeconds; 
    }
    //document.getElementById('countdown').innerHTML = days + ":" + hours + ":" + minutes + ":" + remainingSeconds;
    document.getElementById('dday').innerHTML = days;
    document.getElementById('dhour').innerHTML =hours;
    document.getElementById('dmin').innerHTML =minutes;
    document.getElementById('dsecond').innerHTML =remainingSeconds;



    if (seconds == 0) {
        clearInterval(countdownTimer);
        document.getElementById('countdown').innerHTML = "Completed";
    } else {
        seconds--;
    }
}
var countdownTimer = setInterval('timer()', 1000);

then assign a div to it id="countdown"

Countdown from Database (date)

2 Answers2