时间戳

首页 > 解决方案 > 如何在javascript倒计时上实现开始和停止按钮

javascript - 如何在javascript倒计时上实现开始和停止按钮

问题描述

以下代码应该启动和停止计时器，但是“停止”按钮不起作用。“播放”工作正常。它只是不会停止

var countDown;

function countDownClock() {
  var timeLeft = 5;
  var text = document.getElementById("countDownTimer");
  var countDown = setInterval(function() {
    if (timeLeft == 0) {
      clearInterval(countDown);
      text.innerHTML = "finished!";
    } else {
      text.innerHTML = timeLeft;
    }
    timeLeft -= 1;
  }, 1000);

}
<button onclick="reloadMaths()"><i class="fa fa-play"></i></button>
<button onclick="clearInterval(countDown);"><i class="fa fa-stop"></i></button>

我需要展示更多的JS吗？

最初我认为这篇文章解决了它，因为我没有变量作为全局变量-但是，使它成为全局变量后，这个解决方案无法 使用带有开始和停止按钮的 javascript 倒数计时器

标签： javascript

解决方案

将此行更改 var countDown = setInterval(function() { 为 countDown = setInterval(function() {

在第 1 行中，您已经声明了一个全局 var countDown。然后在函数中你又做了一次，这就是你的 clearInterval 函数不会清除间隔的原因。

推荐阅读