Button 按下按钮时倒计时

所以我创建了一个倒计时，当人们点击按钮时开始计时。倒计时计时器工作正常，但我遇到了两个问题：

如果有人第二次点击按钮，计时器就会加速

如果一个人在计时器结束后单击按钮，它将开始显示负数

我仍在学习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>

120秒休息
i=120；
函数onTimer（）{
document.getElementById（'mycounter'）。innerHTML=i；
我--；
if（i<0）{
警惕（‘时间到了！我们开始吧！’）；
clearInerval（i）；
}
否则{
设置超时（onTimer，1000）；
}
}

您有多处错误。 您编写了

clearinVal（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>

函数onTimer（）{
i=120；
document.getElementById（'mycounter'）。innerHTML=i；
我--；
if（i<0）{
警惕（‘时间到了！我们开始吧！’）；
间隔时间（i）；
}
否则{
设置超时（onTimer，1000）；
}
}

---

请看下面一个更好的代码示例，只需将

i++

更改为

i--

，使其倒计时，而不是本例中的倒计时：

谢谢。仍然在学习，这帮助了很多。我明白我的错误。我想，因为我看了这么久，我没有看到错误，对它的发生感到沮丧。这就是我们学习的方式！调试是编码中最困难和最耗时的部分：考虑使用类似于IDE的VSCODE，它将帮助您修复仍然难以捕捉到的最明显的错误。