从0开始加载每个页面的计数计时器

Count-Up Timer on each page load from 0

本文关键字：计时器 开始 加载      更新时间：2023-09-26

我想实现一个计数定时器JS代码，开始计数在每个加载页面从0。我现在得到的代码是这样的:

var secondsTotal = 0;
setInterval(function() {
    ++secondsTotal;
    var minutes = Math.floor(secondsTotal / 60);
    var seconds = Math.floor(secondsTotal)  % 60;
    var milliseconds = Math.floor(secondsTotal) % 1000;
    document.getElementById('counter').innerHTML = minutes + ":" + seconds + "." + milliseconds;
}, 1000);

输出格式为:00:00.0

mm: ss.ms

那么，如何输出如上格式的结果(分和秒应该精确地以两位数格式打印)?

如果你想每页都这样做，你几乎就可以做到了。现在，您的代码不允许您跟踪毫秒，因为您的setInterval每秒钟运行一次。我建议这样写:

(function() {
     var counter = 0,
     cDisplay = document.getElementById("counter");
     format = function(t) {
         var minutes = Math.floor(t/600),
             seconds = Math.floor( (t/10) % 60);
         minutes = (minutes < 10) ? "0" + minutes.toString() : minutes.toString();
         seconds = (seconds < 10) ? "0" + seconds.toString() : seconds.toString();
         cDisplay.innerHTML = minutes + ":" + seconds + "." + Math.floor(t % 10);
     };
    setInterval(function() {
       counter++;
       format(counter);
    },100);
})();

这样做可以让你的代码每秒运行10次:

  • 输出元素，#counter，被缓存，而不是每次迭代检索
  • 格式只保留算术运算-模和除法。

现在还添加了前导零。

如果您希望保持这个计数器逐页运行，请考虑使用document.cookies将最终值从一页传递到另一页。

小提琴

这是一个很好的第一个版本。但是，您可能需要:

  • 暂停/重新启动定时器
  • 重置定时器
  • 有多个定时器
由于这个原因，我将为上面的代码添加一个稍微复杂的形式，这将允许您管理多个计时器。这将使用一些OO概念。我们将使用一个TimerManager对象来"托管"我们的计时器，并且每个Timer对象将有一个到管理器的链接。

这样做的原因是因为每个计时器将依赖于相同的setInterval()这样做，而不是有多个setInterval()调用。这允许你减少浪费的时钟周期。

5分钟后详细介绍!

以这种方式计算秒数并不能保证准确。setInterval方法可以根据JS引擎完成其他任务的能力而变化。不确定您的用例是什么，例如您希望计算多长时间，但是值得注意。参见setInterval会漂移吗?查看详细的解释。

我建议你检查一下momentjs插件@ http://momentjs.com/和更新你的代码像下面的东西

var startTime = moment();
var el = document.getElementById('counter');
setInterval(function() {
      var ms = moment().diff(startTime),
          min = moment.duration(ms).minutes(),
          sec = moment.duration(ms).seconds();
      ms = moment.duration(ms).milliseconds(); 
      min = (min < 10) ? "0" + min.toString() : min.toString();
      sec = (sec < 10) ? "0" + sec.toString() : sec.toString();
      ms = ms.toString().substring(0,2); // change this if you want to expand ms counter display
      el.innerHtml = min + ":" + sec + "." + ms;
}, 50);

你可以自由地更新间隔，你的毫秒显示不调整你的计算。

相关文章：