0

我不明白为什么几个小时的搜索让我两手空空。情况是这样的：我的网站用户可以设置活动开始的日期和时间。该日期和时间作为时间戳存储在数据库中。我想为他们显示倒计时。所以，我查询数据库

SELECT TIMESTAMPDIFF(SECOND, NOW(), start) 
FROM events 
WHERE eid = '110';

这将返回事件设置开始之前剩余的秒数。我想要的只是能够在 a 中输出span天数、小时数、分钟数和秒数。

这是我到目前为止的javascript：

在阅读了评论、搜索更多内容并一起破解了一些东西之后，这是我更新的代码：

<span id="countdown-1"><?php echo $timeToEvent; ?></span>

（如果有更合适的方法可以将我的“直到事件的秒数”值添加到脚本中，请纠正我。）

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/

此代码有效。但是，正如我上面写的，我不知道是否应该$timeToEvent更直接地将 php 变量传递给脚本。在 javascript 将其更改为我想要看到的内容之前，实际的秒数出现在跨度中大约 1 秒，这有点令人讨厌。（顺便说一句，在这种情况下，我并不太关心准确性；我不介意时间漂移。）

4

2 回答 2

2

你永远不会改变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不会可靠地每秒钟触发一次，因此您的计时器的准确性会一点一点地漂移，直到页面被刷新。更好的方法是存储倒计时的时间，然后每次函数触发时，计算当前时间的偏移量并将该偏移量用于计时器显示。这个 SO 答案是一个很好的方法：https ://stackoverflow.com/a/11336046/711902

于 2013-03-14T21:15:02.413 回答
0

时间是静止的，因为时间是静止的。

在您的函数updateETime()中，您显示变量diff，分解为天、小时、分钟和秒。但由于diff从不改变，因此显示也不会改变。

如果要显示倒计时，则必须diff在每次调用时递减updateETime()。

于 2013-03-14T21:13:42.280 回答