有一个同时计算秒和毫秒的计时器答案

【问题标题】：Have A Timer That Counts both Seconds and Milliseconds有一个同时计算秒和毫秒的计时器
【发布时间】：2016-02-11 16:36:58
【问题描述】：

大家好，我有一个简单的问题。基本上我需要一个同时计算秒数和毫秒数的计时器。我已经构建了一个以秒为单位倒计时的计时器，但是在添加毫秒功能时遇到了一些麻烦。当我尝试添加第二个计时器并将其简单地放在我的第一个计时器旁边时，它干扰了我的第一个计时器。我很久没有做 Java 脚本了，所以我不知道下一步该做什么。

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    </head>

    <body id="body">

        <div id="timer" style="font-family:helvetica; font-size:100px; text-align:center;">24 secs</div>
        <script>
            var count = 24,
                counter = setInterval(timer, 1000),
                running = true;

            function timer() {
                count -= 1;
                if (count <= 0) {
                    clearInterval(counter);
                }
                document.getElementById("timer").innerHTML = count + " secs";
            }
            window.addEventListener("keydown", function(e) {
                switch (e.keyCode) {
                    case 32: // PLAY
                        running ? clearInterval(counter) : counter = setInterval(timer, 1000);
                        running = !running;
                        break;
                    case 82: // RESET
                        clearInterval(counter);
                        document.getElementById("timer").innerHTML = 24 + " secs";
                        count = 24;
                        running = false;
                }
            });
        </script>
    </body>

</html>

【问题讨论】：

对不起，我对编码社区有点陌生@callyalater
一切都好。我只是想在讨厌的 cmets 开始之前让你知道。编码愉快！
你想显示几毫秒？还剩几毫秒？还是应该是24 secs, 24000 milliseconds？
我的意思是这样的（24 60、24 59、24 58 等），然后是（24 01、23 60、23 59）。我希望它像那样循环。第一个数字是秒，后面的数字是毫秒。希望这使它更清楚一点。 @布兰登
一秒有1000毫秒

标签： javascript timer stopwatch milliseconds

【解决方案1】：

这个问题并不像乍一看那么简单。

您无法真正显示每毫秒，因为浏览器无法处理它。

如果对旧浏览器的支持（比如 ~pre 2012）不是问题，我会使用这样的东西：

var count = 24000,
  running = true,
  secondsNode = document.getElementById("seconds"),
  millisecondsNode = document.getElementById("milliseconds"),
  mOld,
  mNew;

function draw() {
  if (count > 0 && running) {
    requestAnimationFrame(draw);
    mNew = new Date().getTime();
    count = count - mNew + mOld;
    count = count >= 0 ? count : 0;
    mOld = mNew;
    secondsNode.innerHTML = Math.floor(count / 1000);
    millisecondsNode.innerHTML = count % 1000;
  }
}
mOld = new Date().getTime();
draw();

window.addEventListener("keydown", function(e) {
  switch (e.keyCode) {
    case 32: // PLAY
      if (running) {
        running = false;
      } else {
        running = true;
        mOld = new Date().getTime();
        draw();
      }
      break;
    case 82: // RESET
      count = 24000;
      secondsNode.innerHTML = 24;
      millisecondsNode.innerHTML = 0;
      running = false;
  }
});

p {
  font-family: helvetica;
  font-size: 100px;
  text-align: center;
}

<body id="body">

  <p><span id="seconds">24</span> secs and <span id="milliseconds">000</span> milliseconds</p>

</body>

这里的核心是方法requestAnimationFrame(...);。简单地说，它是一个原生的JS 方法，一旦浏览器准备好“绘制”一个新框架，它就会执行作为parameter 提供的function。

由于我们不知道自上次执行以来已经过去了多少时间，我们需要使用 current datetime 与我们方法的 datetime last execution 相关联强>。

旁注：

经常需要的nodes 应保存到variable，而不是在每次需要时“计算”。（secondsNode = document.getElementById(...) 节省资源，因为文档只需 traversed 一次。）

Here some further reading on requestAnimationFrame.

And the above code as a Fiddle.

【讨论】：

谢谢你这个代码正在工作，唯一的问题是我用来播放/暂停和重置代码的键不再起作用。这可能是我没有正确插入代码或其他原因的错吗？ @伊万莫德里奇
这可能是我的错。我会调查的。
@ManjotGill 我更新了小提琴和coden-p :)

【解决方案2】：

将您的代码更改为此以显示当前秒的毫秒值。我没有对它进行广泛的测试，因此您必须进行一些修改。这是 10 毫秒的间隔。

var count = 24,
    intervalMs = 10,
    counter = setInterval(timer, intervalMs),
    running = true,
    msRemaining = 1000;

function timer() {
    msRemaining -= intervalMs;
    if (msRemaining <= 0)
    {
        count -= 1;
        if (count <= 0) {
            clearInterval(counter);
        }
        msRemaining = 1000;
    }

    document.getElementById("timer").innerHTML = count + " secs," + msRemaining + " ms";
}

【讨论】：