using javascript countdown with server side time

Question

I have two scripts one in PHP to get the time server side, and the other is a JavaScript countdown based on a date and time. I am not sure what I am doing wrong, but when I pass the date and time to the javascript, it shows 0days 0 hours and1 second and then expires. No matter how far in the future I set the date and time, this always happens. What can I do to pass the time correctly into this JavaScript code?

<?php
$date = 'July 19 2011 05:00:00 PM PDT';
$exp_date = "var end = new Date('". $date ."');";
$todays_date = date("F j Y g:i:s A T");

if ($todays_date < $exp_date) {
?>
<script>
<?php echo $exp_date ;?>

var _second = 1000;
var _minute = _second * 60;
var _hour = _minute * 60;
var _day = _hour *24
var timer;

function showRemaining()
{
    var now = new Date();
    var distance = end - now;
    if (distance < 0 ) {
       clearInterval( timer );
       document.getElementById('countdown').innerHTML = 'EXPIRED!';

       return;
    }
    var days = Math.floor(distance / _day);
    var hours = Math.floor( (distance % _day ) / _hour );
    var minutes = Math.floor( (distance % _hour) / _minute );
    var seconds = Math.floor( (distance % _minute) / _second );

    document.getElementById('countdown').innerHTML = 'Days: ' + days + '<br />';
    document.getElementById('countdown').innerHTML += 'Hours: ' + hours+ '<br />';
    document.getElementById('countdown').innerHTML += 'Minutes: ' + minutes+ '<br />';
    document.getElementById('countdown').innerHTML += 'Seconds: ' + seconds+ '<br />';
}

timer = setInterval(showRemaining, 1000);
</script>
<?php
} else {
    echo "Times Up";
}
?>
<div id="countdown"></div>

Answer 1

I had problems with @Ghostoy's var distance = end - now;

I noticed my seconds counting down would often pause and skip a number every once in a while. When I displayed the distance, I noticed the milliseconds were shifting a little back and forth.

For example, as I watched the distance countdown, these were my results:

400996000
400995001
400993998
400993002
400991999

Could be just my computer, but if the problem happens on my machine, then it could happen to someone else. As a result, I suggest changing var distance to this:

var distance = Math.round((end - now)/1000)*1000;

This fixed it on my machine.

Answer 2

You should provide both current time and end time to clients because they use their own system time against to the server's time.

Here are the entire solution of this problem.

<?php
$date = 'July 20 2011 05:00:00 PM PDT';
$exp_date = strtotime($date);
$now = time();

if ($now < $exp_date) {
?>
<script>
// Count down milliseconds = server_end - server_now = client_end - client_now
var server_end = <?php echo $exp_date; ?> * 1000;
var server_now = <?php echo time(); ?> * 1000;
var client_now = new Date().getTime();
var end = server_end - server_now + client_now; // this is the real end time

var _second = 1000;
var _minute = _second * 60;
var _hour = _minute * 60;
var _day = _hour *24
var timer;

function showRemaining()
{
    var now = new Date();
    var distance = end - now;
    if (distance < 0 ) {
       clearInterval( timer );
       document.getElementById('countdown').innerHTML = 'EXPIRED!';

       return;
    }
    var days = Math.floor(distance / _day);
    var hours = Math.floor( (distance % _day ) / _hour );
    var minutes = Math.floor( (distance % _hour) / _minute );
    var seconds = Math.floor( (distance % _minute) / _second );

    var countdown = document.getElementById('countdown');
    countdown.innerHTML = '';
    if (days) {
        countdown.innerHTML += 'Days: ' + days + '<br />';
    }
    countdown.innerHTML += 'Hours: ' + hours+ '<br />';
    countdown.innerHTML += 'Minutes: ' + minutes+ '<br />';
    countdown.innerHTML += 'Seconds: ' + seconds+ '<br />';
}

timer = setInterval(showRemaining, 1000);
</script>
<?php
} else {
    echo "Times Up";
}
?>
<div id="countdown"></div>

Answer 3

var end = new Date(<?php echo "\"".$todays_date." PDT\""; ?>); // set expiry date and time..

Why are you using today's date as the end(expiration date)? This may be your problem unless I have fundamentally misunderstood your code?