JavaScript：暫停計時器

我知道這個問題已被問及之前，我沒有檢查有關以前的帖子，但迄今爲止我的代碼沒有喜悅。我可以讓我的計時器暫停，但是，當我恢復時，它似乎忽略了暫停功能，並且時間顯示爲計時器尚未暫停。JavaScript：暫停計時器

<!DOCTYPE html> 
<html> 
    <head> 
     <script> 
      var dt = null; 
      var val; 

      function startTimer(){   
       setTimeout(setTime, 100); 
      } 

      function setTime() {     
       if (dt == null) 
        dt = new Date(); 

       var totalseconds = parseInt(((new Date()) - dt)/1000, 10); 
       var hh = parseInt(totalseconds/(60 * 60), 10); 
       var mm = parseInt((totalseconds - (hh * 60 * 60))/60, 10); 
       var ss = parseInt(totalseconds - (hh * 60 * 60) - (mm * 60), 10); 
       document.getElementsByName("txttimer")[0].value = (hh > 9 ? hh : ('0' + hh)) 
       + ":" + (mm > 9 ? mm : ('0' + mm)) + ":" + (ss > 9 ? ss : ('0' + ss)); 
       val = setTimeout(setTime,1000); 
      } 

      function pauseTimer() {    
       clearTimeout(val); 
      } 

      function resumeTimer() {     
       val = setTimeout(setTime,1000); 
      } 

     </script> 
    </head> 
    <body> 
      <form > 
        <input onclick="startTimer()" type="button" value="START" style="position: absolute; 
        margin-left: 20%; margin-top: 10%; width: 75px;"/>       
        <input onclick="pauseTimer()" type="button" value="PAUSE" style="position: absolute; 
        margin-left: 20%; margin-top: 15%; width: 75px;"/> 
        <input onclick="resumeTimer()" type="button" value="RESUME" style="position: absolute; 
        margin-left: 20%; margin-top: 20%; width: 75px;"/>     
        <input type="text" readonly name="txttimer" style="position: absolute; width: 100px; 
        margin-left: 30%; margin-top: 10%; text-align: center"/> 
      </form> 
    </body> 
</html>

如果有人能幫助我，我會非常感激。

來源

2014-04-18 user2781042

不要在字符串中使用'parseInt'！ – Bergi

那麼，檢查你如何計算'totalSeconds'（顯示的）：從當前時間和'dt' ...你認爲可能需要改變什麼？ – Bergi

有幾種方法可以解決這個問題，但是這一切都歸結爲計算從計時器啓動時開始經過的時間，但您沒有考慮暫停的時間。您需要在總時間中減去「已暫停」時間，方法是在您暫停和恢復時記錄該時間。 –

有幾種方法可以解決這個問題，但訣竅在於跟蹤已暫停的秒數，然後從總時間中減去。（或者，您可以只記錄經過的秒數而不是開始時間）。

這裏有一個解決方案：

 var dt = null; 
     var val; 
     var pauseStart = null; 
     var pauseSeconds = 0; 

     function startTimer() { 
      setTimeout(setTime, 100); 
     } 

     function setTime() { 
      if (dt == null) dt = new Date(); 

      var totalseconds = Math.floor((new Date() - dt)/1000); 
      totalseconds -= pauseSeconds; 
      var hh = Math.floor(totalseconds/(60 * 60)); 
      var mm = Math.floor((totalseconds - (hh * 60 * 60))/60); 
      var ss = Math.floor(totalseconds - (hh * 60 * 60) - (mm * 60)); 
      document.getElementsByName("txttimer")[0].value = (hh > 9 ? hh : ('0' + hh)) + ":" + (mm > 9 ? mm : ('0' + mm)) + ":" + (ss > 9 ? ss : ('0' + ss)); 
      val = setTimeout(setTime, 1000); 
     } 

     function pauseTimer() { 
      clearTimeout(val); 
      pauseStart = Date.now(); 
     } 

     function resumeTimer() { 
      pauseSeconds = (Date.now() - pauseStart)/1000; 
      val = setTimeout(setTime, 1000); 
     }

http://jsfiddle.net/mww9D/

注意一兩件事，我沒有在這裏打擾（但你絕對應該）是，如果有人點擊暫停多次，他們打的簡歷之前，會發生什麼情況。或者如果他們在計時器沒有暫停時擊中繼續，該怎麼辦？您應該有邏輯來檢查計時器是否在暫停之前實際運行，並且在恢復時不運行。在這些情況下實際禁用按鈕也可能是有意義的。

來源

2014-04-18 16:59:16

JavaScript：暫停計時器

回答

相關問題