Question

我试图创建一个类似于qqtimer.net上的计时器的计时器计时器的行为如下：

计时器在页面加载时显示0。
按下空格后，计时器开始计时。
再次按下空格时，计时器停止并显示时间。
再次按下空格时，计时器重置并启动，

依此类推。根据我的研究，似乎最好的方法是使用setInterval和document.onkeypress。到目前为止，这是我的代码：

的index.html

<!DOCTYPE html>
<html>
  <head>
    <script src="main.js">
    </script>
  </head>
  <body>
    <div id="timer">
       0
    </div>
  </body>
</html>

main.js

var running = false;
document.onkeypress = function(e) {
  if (e.keyCode === 0 || e.keyCode === 32) {
    if (running) {
      clearInterval(refresh);
    } else {
      var startTime = new Date().getTime();
      var refresh = window.setInterval(function() {
        document.getElementById('timer').innerHTML = new Date().getTime() - startTime;
      }, 100);
    }
  }
};

此代码适用于计时器启动，但停止它似乎不起作用。它永远不会结束原始setInterval，因此第三个空格按下会同时启动另一个setInterval。

我看过多个指南说clearInterval(refresh)应该停止间隔，但这似乎不是真的。

我需要更改以解决此问题？

Answer 1

主要原因是你在if语句中声明刷新，所以当你试图清除它时它是不可用的。看下面这个工作示例。

var running = false;
var refresh;
document.onkeypress = function(e) {
  if (e.keyCode === 0 || e.keyCode === 32) {
    if (running) {
      clearInterval(refresh);
      running = false;
    } else {
      var startTime = new Date().getTime();
      refresh = setInterval(function() {
        document.getElementById('timer').innerHTML = new Date().getTime() - startTime;
      }, 100);
      running = true;
    }
  }
};

基于setInterval的计时器

1 个答案: