javascript - 如何获取播放按钮以在 Javascript 上继续计时器？

Question

Codepen

我只是想让我的播放按钮起作用，但我不知道如何操作。我通过添加 clearInterval(timer) 让我的暂停按钮工作所以我猜我做了相反的事情？

我已经尝试将 countDown 添加到 playTimer 函数并将 tick 添加到 addEventListener 但那些没有工作。

var startButton = document.getElementById("start");
var startSound = document.getElementById("audio"); 
var timerSound = document.getElementById("timer");
var counter = document.getElementById("counter");
var pausePlay = document.getElementsByClassName("pausePlay");
var pauseButton = document.getElementById("pause");
var playButton = document.getElementById('play');
var middleButtons = document.getElementsByClassName("middleButtons");
var fiveMin = document.getElementById("fiveMin");
var end = document.getElementById("endSess");
var redo = document.getElementById("redo");


function playAudio(){
    startSound.play();
}

// Start button will disappear after click and countDown method will begin
function startTimer(){
    startButton.style.display="none"; 
    counter.style.display = "";
    for (var i = 0; i < pausePlay.length; i++) {
        pausePlay[i].style.display = "block";
      }


    countDown(10);
}
// function play(){

// }

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){
            timer = setTimeout(tick, 1);
        } else {
            if(mins > 1){
                countDown(mins - 1);
            }
            else if (mins && seconds === 0 ){
               timerSound.play();
               for (var i = 0; i < pausePlay.length; i++){
                pausePlay[i].style.display = "none";
                }
                options();
            }
        }
    }    
    tick();
  }
// Pause timer
  function pauseTimer(){
    clearInterval(timer);

  }
// Continue timer
function playTimer(){
    countDown();
}


// Display buttons after timer is finished  
  function options(){
    for(var i = 0; i < middleButtons.length; i++){
        middleButtons[i].style.display = "block";
    }
  }
// Add five minutes to Counter as countdown
  function fiveBreak (){
      countDown(5);
  }
// Restart counter to another 25 minutes
  function restartTimer(){
    countDown(25);
}

// Start from the beginning with the start timer
  function endSess(){
    for(var i = 0; i < middleButtons.length; i++){
        middleButtons[i].style.display = "none";
        counter.style.display = "none";
    }
     startButton.style.display = "";
  }




startButton.addEventListener('click', startTimer, playAudio);
pauseButton.addEventListener('click', pauseTimer, playAudio );
playButton.addEventListener('click', playTimer, playAudio );
fiveMin.addEventListener('click', fiveBreak );
end.addEventListener('click', endSess);
redo.addEventListener('click', restartTimer);

Answer 1

这是用于基本倒数计时器的简单代码，我让您添加未通知的“音频”部分

<h3 id="Count-Down">10</h3>
<select id="Count-times" >
  <option value="20">20</option>
  <option value="10" selected >10</option>
  <option value="5">5</option>
</select>
<button id="bt-Start">start</button>
<button id="bt-Pause" disabled >pause</button>
<button id="bt-Clear" disabled >clear</button>

JS:

CountDown = {
  CountDown : document.querySelector('#Count-Down'),
  CountTime : document.querySelector('#Count-times'),
  btStart   : document.querySelector('#bt-Start'),
  btPause   : document.querySelector('#bt-Pause'),
  btClear   : document.querySelector('#bt-Clear'),

  DownTime  : 10 * 1000,
  interV    : 0,

  Init()
  {  
    // just for clean start on reload page
    this.CountTime.value = 10;  

    // select time
    this.CountTime.onchange =_=>{
      this.DownTime              = Number(this.CountTime.value) * 1000
      this.CountDown.textContent = this.CountTime.value
    }

    // buttons click event
    this.btStart.onclick =_=>{ 
      this.CountDownTime();
      this.CountTime.disabled = true;
      this.btStart.disabled   = true;
      this.btPause.disabled   = false;
      this.btClear.disabled   = false;
    }

    this.btPause.onclick =_=>{
      clearInterval( this.interV );

      this.btStart.disabled    = false;
      this.btPause.disabled    = true;
    }

    this.btClear.onclick =_=>{ 
      clearInterval( this.interV );

      this.DownTime              = 10 * 1000;
      this.CountTime.value       = 10;
      this.CountDown.textContent = 10;

      this.CountTime.disabled  = false;
      this.btStart.disabled    = false;
      this.btPause.disabled    = true;
      this.btClear.disabled    = true;
    }
  }, /// Init

  CountDownTime()
  {
    let D_End = new Date(Date.now() + this.DownTime );

    this.interV = setInterval(_=>{
      this.DownTime = D_End - (new Date(Date.now()));

      if (this.DownTime > 0) {
      // this.CountDown.textContent = Math.floor(this.DownTime / 1000) + '-' + (this.DownTime % 1000) ;
        this.CountDown.textContent = (this.DownTime / 1000).toFixed(2); ;
      }
      else {
        this.btClear.click();
      }      
    }, 100);
  }
}

CountDown.Init();