如何在 Javascript 中制作停止按钮以停止一切

Question

我打算制作倒计时，但遇到了问题。我尝试了很多，但我一无所获。请帮助我摆脱这种情况。

我想制作一个停止按钮来重置变量的每个值，并在我点击停止按钮时停止声音。

这是我的代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./style.css">
    <!-- <script src="./script.js"></script> -->
    <title>Timer</title>
</head>

<body>
    <input type="number" id="time-number" placeholder="Enter Seconds" />
    <h3>Time Left <span id="time-left"></span></h3>
    <button id="start-button">Start</button>
    <button id="stop-button">Stop</button>


    <script>
        document.addEventListener("DOMContentLoaded", () => {
            const timeLeftDisplay = document.querySelector("#time-left");
            const startButton = document.querySelector("#start-button");
            const stopButton = document.querySelector("#stop-button");
            var myAudio = new Audio("./sounds.mp3");
            function countDown() {
                var timeleft = document.getElementById("time-number").value;
                console.log(timeleft);
                setInterval(function () {
                    if (timeleft <= 0) {
                        clearInterval((timeleft = 0));

                        myAudio.play();
                    }

                    timeLeftDisplay.innerHTML = timeleft;
                    timeleft -= 1;
                }, 1000);
            }

            startButton.addEventListener("click", countDown);
            stopButton.addEventListener("click", () => {
                myAudio.pause();

            });
        });

    </script>
</body>

</html>

Answer 1

你没有正确使用 clearInterval 函数，它会检查 id 的间隔以清除。在函数顶部保留一个变量将帮助您跟踪间隔。

添加了一些评论以改进代码

document.addEventListener("DOMContentLoaded", () => {
  let intervalId = null;
  const timeLeftDisplay = document.querySelector("#time-left");
  const startButton = document.querySelector("#start-button");
  const stopButton = document.querySelector("#stop-button");
  const myAudio = new Audio("./sounds.mp3");

  function countDown() {
    // clear an old interval just in case the user clicks several times the start button
    if (intervalId) {
      clearInterval(intervalId);
      intervalId = null;
    }

    var timeleft = document.getElementById("time-number").value;
    // this is to show inmediatly the counter and start counting
    timeLeftDisplay.innerHTML = timeleft;
    timeleft -= 1;

    intervalId = setInterval(function() {
      if (timeleft <= 0) {
        // here we use the interval Id to clear the interval.
        clearInterval(intervalId);
        intervalId = null;
        myAudio.play();
      }

      timeLeftDisplay.innerHTML = timeleft;
      timeleft -= 1;
    }, 1000);
  }

  startButton.addEventListener("click", countDown);
  stopButton.addEventListener("click", () => {
    document.getElementById("time-number").value = ""
    timeLeftDisplay.innerHTML = ""
    myAudio.pause();
    if (intervalId) {
      clearInterval(intervalId);
      intervalId = null;
    }

  });
});

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="./style.css">
  <!-- <script src="./script.js"></script> -->
  <title>Timer</title>
</head>

<body>
  <input type="number" id="time-number" placeholder="Enter Seconds" />
  <h3>Time Left <span id="time-left"></span></h3>
  <button id="start-button">Start</button>
  <button id="stop-button">Stop</button>
</body>

</html>

如何在 Javascript 中制作停止按钮以停止一切

How to make stop button in Javascript to stop everything

javascript

global-variables

javascript-objects

dom-events

countdowntimer