按钮点击倒计时

Question

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

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

我仍在学习 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-- 以使其倒计时而不是在此示例中倒计时：Javascript Second Counter