CountDown計時器：暫停按鈕不會暫停或變回播放按鈕

我無法暫停我的倒數計時器。我試圖做到這一點後，我點擊播放按鈕，按鈕變成一個暫停按鈕。但由於某種原因，它不會暫停。CountDown計時器：暫停按鈕不會暫停或變回播放按鈕

我試圖將id「pButton」更改爲「pauseButton」，它正在工作，但似乎我的暫停onclick函數不會更改回pButton，有任何幫助嗎？（clearinterval（timecounter），timercounter是全球varaible所以它可以訪問），另外這裏是代碼筆的完整代碼，如果你需要看到的是：http://codepen.io/freefora11/pen/eJdVjZ

//when play button is pressed 
    if(document.getElementById("pButton")){ 
     document.getElementById("pButton").onclick=function(){ 

      //change the id of the button 
      if(document.getElementById("pButton")){ 
       document.getElementById("pButton").id = "pauseButton"; 
      } 

      //variables 
      strMin = document.getElementById("test").innerHTML; 
      var res = strMin.split(":",2); 
      min = parseInt(res[0]); 
      min= min * 60; 
      var sec = parseInt(res[1]); 
      timeInSeconds = min + sec; 



      //set interval to start keeping track each second that has passed 
      timeCounter = setInterval(function() { 
       timeInSeconds--; 

       // If we hit 0 seconds clear the timer 
       if (timeInSeconds <= 0) { 
       clearInterval(timeCounter); 
       } 

       // Display the current time 
       displayTime(); 
      }, 1000); 
     } 
    } 

    //when the pause button is clicked 
    if(document.getElementById("pauseButton")){ 
     document.getElementById("pauseButton").onclick=function(){ 

      //stop the interval 
      clearInterval(timeCounter); 

      //change the id of the play button from pauseButton to pButton again 
      if(document.getElementById("pauseButton")){ 
       document.getElementById("pauseButton").id ="pButton"; 
      } 

     } 
    }

來源

2015-12-26 jediderek

更改ID似乎是一個可怕的想法，你應該改變類。也只能使用一個點擊處理程序，做你的狀態檢查在一個處理程序。 – Musa

這花了一段時間，但我能弄清楚如何把它放到一個處理程序，謝謝 – jediderek

更改標識還會留下處理程序的殘餘在DOM左右。所以當你運行你的codepen並點擊開始/暫停按鈕時，你會注意到它正在向定時器添加另一個倒計時。這就是爲什麼每次點擊按鈕倒計時都會加快。

您應該在按鈕的一個處理程序中處理單擊事件的狀態。如果狀態暫停，則處理您的暫停邏輯。如果它正在運行，那麼處理你的運行邏輯。但是，從一個事件處理程序完成這一切。在這種情況下使用id或class是很好的，但不要動態地交換它。如果有的話，使用Id作爲點擊處理程序，然後交換dom中元素的類（或應用數據屬性）將更好地表示當前的時鐘狀態/模式。

儘管如此，處理您的JavaScript中的邏輯。如果您選擇使用dom狀態來應用樣式（例如在您的CSS中選擇）。

來源

2015-12-26 01:42:19 mariocatch

我想知道爲什麼它增加了另一個計數器的計時器。我最終處理了這個遊戲，並通過點擊數來暫停一個處理程序，並且當點擊次數是偶數時，它會起作用，而奇數會暫停它，謝謝！ – jediderek

CountDown計時器：暫停按鈕不會暫停或變回播放按鈕

回答

相關問題