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

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

• javascript
• php
• mysql
• date
• countdown

• Have you looked at the examples here on SO? stackoverflow./search?q=javascript+countdown For example, stackoverflow./questions/1191865/… has many different answers that can be modified to fit your needs. – Sean Commented Oct 3, 2015 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 Commented Oct 3, 2015 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 Commented Oct 3, 2015 at 15:30
• @Bruno Could you post the other code you tried and why it didn't work? – ASCIIThenANSI Commented Oct 3, 2015 at 15:31
• <p id="counter"></p> <script> var counter = new Date(2015,10,10,20,25,30); var counterElem = document.getElementById("counter"); setInterval(function() { counter.setSeconds(counter.getSeconds() - 1); counterElem.innerHTML = counter.getDate()+" <span style=\'font-size:.3em;\'>dias</span> "+counter.getHours()+" <span style=\'font-size:.3em;\'>horas</span> "+counter.getMinutes()+" <span style=\'font-size:.3em;\'>minutos</span> "+counter.getSeconds()+" <span style=\'font-size:.3em;\'>segundos</span>"; },1000); </script> – Bruno Commented Oct 3, 2015 at 15:37

2 Answers 2

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>

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"