使用javascript暂停/播放计时器

Question

我不精通Javascript。我正在为一项锻炼活动设置一个5分钟的计时器。然而，当我按下播放按钮时，计时器会减少，但当我再次按下播放按钮，计时器会与当前计时器重叠。

如何暂停计时器并只允许单击一次？我应该设置另一个暂停按钮吗？这是代码：

<!--JS for timer countdown, have to find a way to prevent button from keep pressing-->
<script type="text/javascript">
function startTimer() {
var btton = document.getElementById('start')
var min = 0;
var sec = 59;
setInterval(function () {
document.getElementById("timer").innerHTML = min + ":" + sec;
sec--;
if (sec == -1) {
min--;
sec = 59;
}
if (min == -1) {
clearTimeout();
}
if (sec < 10) {
sec = "0" + sec;
}
}, 1000);
}

</script>
<div id="timer">
<div id="time">5:00</div>
</div>
<img id="start" src="../img/icons/play-button.png" onclick="return startTimer()">

Answer 1

您可以创建一个变量来存储timerId，并通过clearInterval清除

function pause() {
clearInterval(timerId);
}

var timerId;
var min = 0;
var sec = 59;
var isplay = true;
document.getElementById('pause').style.display = 'none';
function startTimer() {
var btton = document.getElementById('start').style.display = 'none';
document.getElementById('pause').style.display = 'inline';
timerId = setInterval(function () {
document.getElementById("timer").innerHTML = min + ":" + sec;
sec--;
if (sec == -1) {
min--;
sec = 59;
}
if (min == -1) {
clearTimeout();
}
if (sec < 10) {
sec = "0" + sec;
}
}, 1000);
}
function pause() {
clearInterval(timerId);
document.getElementById('start').style.display = 'inline';
document.getElementById('pause').style.display = 'none';
}

<div id="timer">
<div id="time">5:00</div>
</div>
<button id="start" onclick="return startTimer()">Start</button>

<button id='pause' onclick="pause()">Pause</button>