我知道这很容易，但我在代码中有点迷失。如何让计时器在到达 00：00 后停止？

Question

if anyone might guide me to create a stopTimer function that works in this scenario I will send all my good thoughts and energy towards them :) thank you in advance!

我正在制作一个旅馆的小脚本，我做了一个计时器，从我告诉他的任何时间开始都可以倒计时，但是我有点卡在停止二聚体部分。我添加了"最小" ID来测试它，因此我不必每次都等待十亿年。我只上传了脚本的一分钟一部分，所以我没有创造出目前该代码混乱的心理创伤。

  <div id="circle"> <p class='roomnumber'>1</p> </div>
            <div id="howmanyhours">
                 <ul>
                        <li id="twore"><div><span class="timetwore">2 Ore</span> </div> </li>
                        <br>
                        <li id="three">3 Ore</li>
                        <br>
                        <li id="min">1min Ore</li>
                        <br>
                        <li id="five">5 Ore</li>
                        <br>
                        <li id="day">24 Ore</li>
                </ul>
        </div>
<script>
// making stuff happen ye ye ye yo yo yo ye 
  function startTimer(duration, display) {
    var timer = duration, minutes, seconds;
    setInterval(function () {
        minutes = parseInt(timer / 60, 10);
        seconds = parseInt(timer % 60, 10);
        minutes = minutes < 10 ? "0" + minutes : minutes;
        seconds = seconds < 10 ? "0" + seconds : seconds;
        display.textContent = minutes + ":" + seconds;
        if (--timer < 0) {
            timer = duration;
        }
    }, 1000);
} 


//onemin
var onemin = document.querySelector("#min");
   onemin.addEventListener("click", function() {
        var oneMinutes = 60 * 1,
              display = document.querySelector('#min');
                     startTimer(oneMinutes, display);

})


</script>

Answer 1

您正在搜索clearInterval()

function startTimer(duration, display) {
  var timer = duration,
    minutes, seconds,
  interval = setInterval(function() {
    minutes = parseInt(timer / 60, 10);
    seconds = parseInt(timer % 60, 10);
    minutes = minutes < 10 ? "0" + minutes : minutes;
    seconds = seconds < 10 ? "0" + seconds : seconds;
    display.textContent = minutes + ":" + seconds;
    if (--timer < 0) {
      timer = duration;
      clearInterval(interval);
    }
  }, 1000);
}
//onemin
var onemin = document.querySelector("#min");
onemin.addEventListener("click", function() {
  var oneMinutes = 10 * 1, // should be 60 * 1
    display = document.querySelector('#min');
  startTimer(oneMinutes, display);
})

<div id="circle">
  <p class='roomnumber'>1</p>
</div>
<div id="howmanyhours">
  <ul>
    <li id="twore">
      <div><span class="timetwore">2 Ore</span> </div>
    </li>
    <br>
    <li id="three">3 Ore</li>
    <br>
    <li id="min">1min Ore</li>
    <br>
    <li id="five">5 Ore</li>
    <br>
    <li id="day">24 Ore</li>
  </ul>
</div>

Answer 2

setInterval返回手柄intervalID，可用于使用clearInterval方法取消间隔。例如

let i = 0;
let interval = setInterval(() => {
  console.log(i++);
  if (i === 10)
    clearInterval(interval);
}, 100);

返回的Intervalid是一个数字，非零值，它标识了呼叫对setInterval((创建的计时器;可以将此值传递给WindowRworkerGlobalsCope.ClearInterval((以取消超时。 mdn