我做了一个简单的计时器,问题是我无法通过单击“停止”按钮来停止它。我也发现,如果多次单击“开始”按钮,计时器会加快速度,是否有任何方法可以解决此问题?以及如何在计时器停止计时或时间到期后手动经过期望的时间(通过将其放入提示中)?
let getId = x => document.getElementById(x);
let total = 20;
function check(x) {
if(x<10){
x= "0"+x;
return x;
}
else return x;
}
let hours = Math.floor(total / 3600);
let minutes = Math.floor(total % 3600 / 60);
let seconds = Math.floor(total % 3600 % 60);
hours = check(hours);
minutes = check(minutes);
seconds = check(seconds);
getId('timer').innerHTML = hours + ':' + minutes + ':' +seconds;
function start() {
let hours = Math.floor(total / 3600);
let minutes = Math.floor(total % 3600 / 60);
let seconds = Math.floor(total % 3600 % 60);
hours = check(hours);
minutes = check(minutes);
seconds = check(seconds);
getId('timer').innerHTML = hours + ':' + minutes + ':' +seconds;
if(total == 0){
getId('timer').innerHTML+= '<br>' + 'Time expired';
return;
}
total--;
}
getId('set').addEventListener('click', function(){
let total = +prompt('Insert desired countdown');
});
getId('start').addEventListener('click', function(){
let timer = setInterval(start,1000);
if(total == 0){
clearInterval(timer);
}
});
getId('stop').addEventListener('click', function(){
clearInterval(timer);
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<p id="timer"></p>
<form action="">
<input type="button" id="set" value="Set">
<input type="button" id="start" value="Start">
<input type="button" id="stop" value="Stop">
</form>
<script src="script.js"></script>
</body>
</html>
答案 0 :(得分:1)
timer
变量在匿名函数中声明。因此,它仅在该函数内部可用。
您需要将let timer
移到外面。如下所示。
let timer;
getId('start').addEventListener('click', function(){
timer = setInterval(start,1000);
if(total == 0){
clearInterval(timer);
}
});
getId('stop').addEventListener('click', function(){
clearInterval(timer);
});
这里codepen的计时器设置正常工作,并且无法加快速度。缺少一些内容(例如,您应该检查输入值是否为数字),但是它可以正常工作。
答案 1 :(得分:0)
您的计时器变量在start方法中是本地的,这就是为什么stop不起作用(将其设置为全局)的原因。另外,在启动方法中,首先检查是否设置了计时器,如果没有设置,请清除计时器,以避免加速。