网页的通用循环倒数计时器

Universal, looping countdown timer for a web page

本文关键字：倒数 计时器 循环 网页      更新时间：2023-09-26

我正在寻找一个计时器放在我的网站上，计时器将设置为一个小时，在倒计时到零后，它再次重置为一小时。它还必须是通用的，因此它对所有用户显示相同的内容，并且如果您刷新页面，它不会重置回 1 小时。我猜这相对简单，但是我能找到的只是计入某个时间并停止的计时器，或者在页面刷新后从零开始的计时器是不够的。

如果有人可以提供帮助，或者知道有类似内容的链接，我将不胜感激！

提前谢谢。

这是一个

我知道它会有所帮助的条件。

ctsecs--;
if(ctsecs < 0) {
    if(ctmnts > 0) {
        ctsecs = 59;
        ctmnts--;
        if(cthrs > 0) {
            ctmnts = 59;
            cthrs--;
        } else {
            ctsecs = 0;
            ctmnts = 0;
            cthrs = 0;
        }
    }
}

您可以让计时器只显示 UTC 当前分钟和秒的补码：

​setInterval(function() {
    var d = new Date;
    var s = (60 - d.getUTCMinutes()) + ":" + (60 - d.getUTCSeconds());
    $("#time").text(s);
}, 250);​

这是一个演示页面，您可以在其中看到它的实际效果。

为什么不只获取当前时间，只显示分钟？否则，它必须在服务器端完成。

你可以

使用 ajax 来实现这个目的。 在服务器上创建一个数据库条目大约 60 分钟，并使用 Ajax 请求更新客户端的时间，这将比客户端脚本更安全。

如果你想要一个每秒滴答作响的计时器，setInterval 是一个糟糕的选择。它仅以大约请求的间隔运行，并且会缓慢漂移。使用它的时钟不会流畅，除非你经常打电话，这是浪费。

更好的策略是使用 setTimeout 按顺序调用自身，根据到下一个即时报价的时间加上少量时间设置滞后。 例如，一个非常简单的时钟：

<script>
function addZ(n) {
  return (n<10? '0' : '') + n;
}
function update() {
  var d = new Date();
  // Set lag to 20ms after next full second
  var lag = 1020 - d.getMilliseconds();
  document.getElementById('d0').innerHTML = addZ(d.getHours()) + ':' +
    addZ(d.getMinutes()) + ':' + addZ(d.getSeconds());
  setTimeout(update, lag);
}
window.onload = update;
</script>
<div id="d0"></div>

如果您对将系统时钟用于计数器感到满意，并且希望每个人都看到相同的数字（或多或少），则可以使用Date的UTC方法：getUTCHours，getUTCMinutes和getUTCSeconds。

相关文章：