Question

我正在努力做一个简单的倒计时，但它不会像我认为的那样有效。这是我第一次在Javascript中使用setInterval，如果有人能找到我的错误，我会非常高兴。

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        <script type="text/javascript">
            function timer () {
                window.clearTimeout(clock)
                var seconds = 10;
                var clock = setInterval(function() {
                    if (seconds == 0) {

                    } else {
                        seconds = seconds-1;
                        document.getElementById('seconds').innerHTML = seconds;
                    };
                },1000);
            }
        </script>
        <button onclick="timer();">timer</button>
        <p id="seconds">10</p>
    </body>
</html>

我希望当您点击按钮时计时器会重新启动，但同时有2个计时器在运行。

Answer 1

您需要解决的代码有几个问题：

您需要将clock变量设为全局变量。在您的示例中，每次调用clock函数时都会创建一个空的新变量timer()。
您使用的是clearTimeout()函数，而不是clearInterval()函数。
setInterval()功能可能会遗漏某些刻度，然后您的seconds计数器将会关闭。如果您希望避免这种情况，则应在每次调用间隔函数时检查当前时间。

<!DOCTYPE html>
<html>
    <body>
        <script type="text/javascript">
            var clock;
            function timer () {
                clearInterval(clock);
                var start = new Date().getTime();
                clock = setInterval(function() {
                    var seconds = Math.round(10 - (new Date().getTime() - start) / 1000);
                    if (seconds > 0)
                        document.getElementById('seconds').innerHTML = seconds;
                    else 
                        clearInterval(clock);
                }, 1000);
            }
        </script>
        <button onclick="timer();">timer</button>
        <p id="seconds">10</p>
    </body>
</html>

明细Math.round(10 - (new Date().getTime() - start) / 1000)：

new Date().getTime()返回自纪元以来的当前时间（以毫秒为单位）。
(... - start) / 1000返回自计时器启动以来的秒数。
10 - ...返回剩余秒数。
Math.round(...)将结果舍入为整数。

Answer 2

只使用setTimeout简化了一些事情（您使用setInterval，但clearTimeout清除它），在timer函数之外声明必要的变量并添加{{1能够重置计时器的参数。

＆＃13;

reset

＆＃13;

(function () {
  var report = document.querySelector('#seconds');
  var seconds = 10;
  var timed = null;
  
  document.querySelector('button')
    .addEventListener('click', function(e) { timer(true) });
  
  timer(true);

  function timer (reset) {
     seconds -= 1;
     if(reset) { 
       clearTimeout(timed); 
       seconds = 10; 
     }
     report.textContent = seconds;
     if (seconds > 0 ) {
      timed = setTimeout(timer, 1000);
     }
  }
}())

＆＃13;

#seconds {
  font: 48px/70px bold verdana, arial;
  color: white;
  width: 70px;
  height: 70px;
  background: green;
  text-align: center;
  border-radius: 50%;
}

＆＃13;

Javascript easy计时器不起作用

2 个答案: