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>

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

1 个答案: