如何在 Javascript 上为计时器制作暂停/播放按钮？

Question

我正在尝试在 javascript 上使我的暂停和播放按钮功能，但我不完全知道这背后的逻辑

我尝试将clearInterval()方法放在我的pauseTimer函数中

var startButton = document.getElementById("start");
var startSound = document.getElementById("audio"); 
var timerSound = document.getElementById("timer");
var counter = document.getElementById("counter");
var middlebuttons = document.getElementsByClassName("middlebuttons");
var pauseButton = document.getElementById("pause");
var playButton = document.getElementById('play');


function pauseTimer(){
    clearInterval();
    alert("Pause button");
  }

function playTimer(){
    alert("Play button");
}

function countDown(minutes){
    var seconds = 60;
    var mins = minutes;
    function tick(){

        var current_minutes = mins - 1;

        seconds --;
        counter.innerHTML = current_minutes.toString() + ":" + (seconds < 10 ? "0" : "") + String(seconds);
        if(seconds > 0){
            setTimeout(tick, 10);
        } else {
            if(mins > 1){
                countDown(mins - 1);
            }
            else if (mins && seconds === 0 ){
               timerSound.play();
                buttons();
            }
        }
    }    
    tick();

  }

pauseButton.addEventListener('click', pauseTimer, playAudio );
playButton.addEventListener('click', playTimer, playAudio );

Answer 1

这是一个经过彻底评论的建议解决方案。 它使用totalSeconds变量作为计数器的真实来源。

需要timer变量的原因是因为clearInterval想要被告知要清除哪个间隔。

此演示中没有“停止”按钮。 如果您想在计时器运行时重置计时器，只需刷新页面即可。 （并且它不包含任何播放声音的函数，但您可以在代码中的适当位置添加这些函数。）

 // Defines identifiers for accessing HTML elements const minutesInput = document.getElementById("minutesInput"), startButton = document.getElementById("startButton"), pauseButton = document.getElementById("pauseButton"), unpauseButton = document.getElementById("unpauseButton"), counterDiv = document.getElementById("counterDisplay"); // Adds listeners and declares global variables startButton.addEventListener('click', start); pauseButton.addEventListener('click', pauseTimer); unpauseButton.addEventListener('click', runTimer); let totalSeconds; // global variable to count down total seconds let timer; // global variable for setInterval and clearInterval //Disables buttons that are not needed yet disable(pauseButton); disable(unpauseButton); // Defines functions that get the minutes and seconds for display function getMinutes(totalSeconds){ return Math.floor(totalSeconds / 60); // Gets quotient rounded down } function getSeconds(totalSeconds){ let seconds = totalSeconds % 60; // Gets remainder after division return (seconds < 10 ? "0" + seconds : seconds) // Inserts "0" if needed } // Defines functions that manipulate the countdown function start(){ totalSeconds = minutesInput.value * 60; // Sets initial value of totalSeconds based on user input counterDiv.innerHTML = getMinutes(totalSeconds) + ":" + getSeconds(totalSeconds); // Initializes display disable(minutesInput); disable(startButton); // Toggles buttons runTimer(); } function runTimer(){ // Is the main timer function, calls `tick` every 1000 milliseconds timer = setInterval(tick, 1000); disable(unpauseButton); enable(pauseButton); // Toggles buttons } function tick(){ if(totalSeconds > 0){ totalSeconds--; // Decreases total seconds by one counterDiv.innerHTML = getMinutes(totalSeconds) + ":" + getSeconds(totalSeconds); // Updates display } else{ // The timer has reached zero. Let the user start again. enable(minutesInput); enable(startButton); disable(pauseButton); disable(unpauseButton); } } function pauseTimer(){ // Stops calling `tick` and toggles buttons clearInterval(timer); disable(pauseButton); enable(unpauseButton); } // Defines functions to disable and re-enable HTML elements function disable(element){ element.setAttribute("disabled",""); } function enable(element){ element.removeAttribute("disabled"); }

 counter{ height: 1em; width: 2em; margin: 0.4em; border: 1px solid grey }

 <label> How many minutes?: <input type="number" id="minutesInput" value="1" /> </label> <br /> <button id="startButton">Start</button> <button id="pauseButton">Pause</button> <button id="unpauseButton">Continue</button> <div id="counterDisplay"></div>