Question

大家好，我有什么应该是一个简单的问题。基本上我需要一个计算秒和毫秒的计时器。我已经构建了一个计时器，它在几秒钟内倒计时但在添加毫秒函数时遇到了一些麻烦。当我试图添加第二个计时器并将其放在我的第一个计时器旁边时，它干扰了我的第一个计时器。我已经做了很长时间的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>

Answer 1

将代码更改为此值以显示当前秒的毫秒值。我没有对它进行过广泛的测试，所以你必须做一些修改。这是一个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";
}

Answer 2

这个问题比初看起来的问题略微微不足道。

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

如果对旧浏览器的支持（比如〜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方法，一旦浏览器准备好“绘制”新框架，就会执行function提供的parameter。

由于我们不知道自上次执行以来已经过了多少时间，我们需要使用与我们方法的datetime相关的当前 datetime 最后一次执行。

旁注：

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

Here some further reading on requestAnimationFrame.

And the above code as a Fiddle.

有一个计时器，计算秒和毫秒

2 个答案: