используя отсчет JavaScript со временем на стороне сервера

Question

У меня есть два скрипта, один на PHP, чтобы получить сервер времени, а другой - обратный отсчет JavaScript, основанный на дате и времени.Я не уверен, что я делаю неправильно, но когда я передаю дату и время в javascript, он показывает 0days 0 часов и 1 секунду и затем истекаетНезависимо от того, как далеко в будущем я установлю дату и время, это всегда происходит.Что я могу сделать, чтобы правильно передать время в этот код JavaScript?

<?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

Вы должны предоставить клиентам как текущее время, так и время окончания, поскольку они используют свое системное время относительно времени сервера.

Вот полное решение этой проблемы.

<?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 2

У меня были проблемы с @ Ghostoy's var distance = end - now;

Я заметил, что мой отсчет секунд часто останавливался и время от времени пропускал число. Когда я отобразил расстояние, я заметил, что миллисекунды немного смещаются назад и вперед.

Например, когда я смотрел обратный отсчет расстояния, это были мои результаты:

400996000
400995001
400993998
400993002
400991999

Может быть, это только мой компьютер, но если проблема возникает на моей машине, то это может случиться с кем-то еще. В результате я предлагаю изменить расстояние var к этому:

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

Это исправило это на моей машине.

Answer 3

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

Почему вы используете сегодняшнюю дату как дату окончания срока действия? Это может быть вашей проблемой, если я не понял вашего кода в корне?