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：暂停计时器

回答

相关问题