单击按钮倒数计时器

Question

所以我创建了一个倒计时计时器，当用户单击按钮时该计时器开始计时。倒数计时器有效，但我运行遇到的问题有两件事：

如果有人再次点击按钮，它会加快计时器的速度
如果有人在计时器结束后点击按钮，它就会开始显示负数。

我还在学习Java，无法理解这一点。

<button 
style="
background:#f1b005;
margin-bottom: 25px;
border:0px;
color: White;
text-align: center;
text-decoration: none;
display: inline-block;
height:50px;
width:125px;
border-radius: 5px;
align:center;
cursor: pointer;"
onclick="onTimer()">
120 Sec Rest
</button>
<div 
style="60px;
font-size:30px;
text-align:center;
color:#f1b005;"
id="mycounter">
</div>
<script>
i = 120;
function onTimer() {
  document.getElementById('mycounter').innerHTML = i;
  i--;
  if (i < 0) {
    alert('Times Up! Lets Get It!');
    clearInerval(i);
  }
  else {
    setTimeout(onTimer, 1000);
  }
}
</script>

Answer 1

你有多个错误。你写了 clearInerval(i) 而不是 clearInterval(i)。您将 i 的定义放在函数之外 - 所以它被设置一次，每次单击它时，它都会执行该函数但不会重置 i.

速度变慢是因为你在做i--，这使得i的值降低了一个。

主要问题是您在函数外设置了 i。试试这个：

<script>
function onTimer() {
  i = 120;
  document.getElementById('mycounter').innerHTML = i;
  i--;
  if (i < 0) {
    alert('Times Up! Lets Get It!');
    clearInterval(i);
  }
  else {
    setTimeout(onTimer, 1000);
  }
}
</script>

在此处查看更好的代码示例，只需将 i++ 更改为 i-- 以使其在本示例中倒计时而不是向上倒计时：

单击按钮倒数计时器

Count down timer on button click

timer

click

button