Question

我正在制作带有启动和停止按钮的番茄钟。我有启动按钮功能，但没有停止按钮。这是我的代码：

HTML：

<h1> Pomodoro Clock</h1>
<!--Place holder for timer-->
<div id="timer" class="circle">Timer</div>
<!--//Start Button-->
<button onclick="setTimeout(timer, 1000);">Start</button>
<!--Stop Button-->
<button onclick="timer.stopTimer()">Stop</button>

JS：

var i = 1500;
var timeHandler;
document.getElementById("timer").innerHTML = i;

function timer() {
  timeHandler = setInterval(function() {
    if (i > 0) {
      i--;
      document.getElementById("timer").innerHTML = i;
    }
  }, 1000);

  function stopTimer() {
    clearTimeout(timeHandler);
  }
}

我更喜欢香草JS解决方案。

Answer 1

试试这个：

HTML

<!--Stop Button-->
<button onclick="stopTimer()">Stop</button>

JS

var i = 1500;
var timeHandler;
document.getElementById("timer").innerHTML = i;

function timer() {
  timeHandler = setInterval(function() {
    if (i > 0) {
      i--;
      document.getElementById("timer").innerHTML = i;
    }
  }, 1000);
}

function stopTimer() {
  clearTimeout(timeHandler);
}

我的pomdoro时钟的停止按钮不起作用

1 个答案: