我不明白为什么找了几个小时却一无所获。情况是这样的:我的站点用户可以设置事件开始的日期和时间。该日期和时间作为时间戳存储在数据库中。我想为他们显示一个倒计时。因此,我查询db
SELECT TIMESTAMPDIFF(SECOND, NOW(), start)
FROM events
WHERE eid = '110';
返回事件设置为开始前剩余的秒数。我想要的只是能够在span
中输出天数,小时,分钟,&秒。
这是我到目前为止的javascript:
在阅读了评论,搜索了更多,并把一些东西放在一起后,这是我更新的代码:
<span id="countdown-1"><?php echo $timeToEvent; ?></span>
(如果有一个更合适的方法来获得我的"seconds 'til event"值到脚本,请纠正我。)
secs = parseInt(document.getElementById('countdown-1').innerHTML,10);
setTimeout("countdown('countdown-1',"+secs+")", 1000);
function countdown(id, timer){
function pad(num) {
return num > 9 ? num : '0'+num;
};
timer--;
days = Math.floor( timer / 86400 ),
hours = Math.floor( timer / 3600 ),
mins = Math.floor( timer / 60 ),
secs = Math.floor( timer ),
dd = days,
hh = hours - days * 24,
mm = mins - hours * 60,
ss = secs - mins * 60;
clock = dd + ' days ' + pad(hh) + ':' + pad(mm) + ':' + pad(ss) ;
document.getElementById(id).innerHTML = clock;
if ( timer > 0 ) {
setTimeout("countdown('" + id + "'," + timer + ")", 1000);
} else {
window.location.reload(true);
}
}
http://jsfiddle.net/mmJQq/这段代码可以工作。然而,正如我上面所写的,我不知道是否应该更直接地将php变量$timeToEvent
传递给脚本。有点烦人的是,在javascript将其更改为我想要看到的内容之前,实际秒数出现在跨度中大约1秒。(顺便说一下,我并不过分关注这种情况下的准确性;我不介意时间的流逝。
你永远不会改变diff
。每次函数运行时,它仍然是相同的值。将diff
移出函数,然后每次函数运行时减少1000毫秒(1秒)。
var
diff = 3850000; // Move this outside the function so that it can be changed.
// If you don't, it will get reset to its original value
// every time updateETime runs.
function updateETime() {
function pad(num) {
return num > 9 ? num : '0'+num;
};
days = Math.floor( diff / (1000*60*60*24) ),
hours = Math.floor( diff / (1000*60*60) ),
mins = Math.floor( diff / (1000*60) ),
secs = Math.floor( diff / 1000 ),
dd = days,
hh = hours - days * 24,
mm = mins - hours * 60,
ss = secs - mins * 60;
document.getElementById("countdown_time")
.innerHTML =
dd + ' days ' +
pad(hh) + ':' + //' hours ' +
pad(mm) + ':' + //' minutes ' +
pad(ss) ; //+ ' seconds' ;
diff -= 1000; // Every time the function runs, subtract one second from diff.
}
setInterval(updateETime, 1000 );
http://jsfiddle.net/ZWrqB/正如一位评论者指出的那样,这并不是完全可靠的,因为setInterval
不会可靠地每秒钟都精确地触发,所以你的计时器的准确性会一点一点地漂移,直到页面刷新。更好的方法是存储要倒计时的时间,然后每次函数触发时,计算当前时间的偏移量,并将该偏移量用于计时器显示。下面的答案是一个很好的方法:https://stackoverflow.com/a/11336046/711902
时间是静态的,因为时间是静态的。
在函数updateETime()
中,显示变量diff
,分解为天、小时、分钟和秒。但由于diff
永远不会改变,显示也不会改变。
如果你想显示一个倒计时,你必须递减diff
,每次调用updateETime()