使用服务器端时间的javascript倒计时
using javascript countdown with server side time
我有两个脚本,一个是PHP脚本,用于获取时间服务器端,另一个是基于日期和时间的JavaScript倒计时。我不确定我做错了什么,但当我将日期和时间传递给javascript时,它会显示0天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>
您应该向客户端提供当前时间和结束时间,因为客户端使用自己的系统时间来代替服务器的时间。
以下是这个问题的全部解决方案。
<?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>
我对@Ghostoy的var distance = end - now;
有问题
我注意到我倒计时的秒数经常会暂停,每隔一段时间就会跳过一个数字。当我显示距离时,我注意到毫秒有点来回移动。
例如,当我观看距离倒计时时,以下是我的结果:
400996000
400995001
400993998
400993002
400991999
可能只是我的电脑,但如果问题发生在我的电脑上,那么它可能发生在其他人身上。因此,我建议将var距离更改为:
var distance = Math.round((end - now)/1000)*1000;
这把它固定在我的机器上。
var end = new Date(<?php echo "'"".$todays_date." PDT'""; ?>); // set expiry date and time..
为什么使用今天的日期作为结束日期(截止日期(?这可能是你的问题,除非我从根本上误解了你的代码?
相关文章:
- 如何在窗体打开时从javascript倒计时计时器值中节省时间
- Javascript倒计时计时器倒计时未正确更新秒/分钟
- 结束后Javascript倒计时计时器重定向
- 停止javascript倒计时
- 设置Javascript倒计时计时器的初始值
- 自调整Javascript倒计时
- JavaScript倒计时计时器不会显示两次
- 如何设置此javascript倒计时计时器的样式
- 需要在 javascript 倒计时达到 0 后替换字符串
- 从d:h:m:s开始的javascript倒计时
- 创建php/javascript倒计时计时器时出现问题
- Javascript倒计时将在0:00停止
- JavaScript倒计时;不能在Safari中工作
- foreach循环中的Javascript倒计时时钟
- javascript倒计时并更新数据库php
- Javascript倒计时越来越慢
- 我想在 0 处停止这个 JavaScript 倒计时
- Javascript 倒计时时间无法显示
- 可多次使用的Javascript倒计时计时器
- Javascript倒计时在每次运行后都会变得更快