Question

在下面的脚本中，我尝试制作某种秒表：

<html>
  <head>
   <script>
     var t; var time; var timetoRun=180000;// 3 min

     function Timer()
     {
      stoper = (this.startTime+ this.timetoRun)-new Date().getTime();
      x = parseInt(stoper / 1000);
      s = x % 60;
      x = parseInt(x/60);
      m = x % 60;
      if (s<10) s='0'+ s;document.getElementById('txt').innerHTML=m+':'+s; 
      this.t=setTimeout(function(){Timer()},500);
     }

    function myStopFunction(){clearTimeout(t);}
    function init(){this.startTime = new Date().getTime();}
   </script>
  </head>

   <body onload="init()">
     <div id="txt"></div>
     <button onclick="myStopFunction()">Stop time</button>
     <button onclick="Timer()">Start time</button>
   </body>
</html>

问题是：当我在2:28停留时间并在5秒后再次启动时。值立即跳转到2:23。我想要达到的目的是：停止（例如）2:31的时间并从2:31再次运行。

提前致谢。

Answer 1

我认为这是您正在寻找的解决方案

<html>
  <head>
   <script>
     var t; 
     var time; 
     var timetoRun=180000;// 3 min
     var lastTime = -1;

    function StartTimer() {
        this.startTime = new Date().getTime();
        this.lastTime = lastTime < 0 ? this.timetoRun : this.lastTime;
        this.timetoRun = this.lastTime;
        Timer();
    };

     function Timer() {
      var difference = (this.startTime - new Date().getTime());
      console.log(difference / 1000);
      this.lastTime = this.timetoRun + difference;
      x = parseInt(this.lastTime / 1000);
      s = x % 60;
      x = parseInt(x/60);
      m = x % 60;
      if (s<10) s='0'+ s;

      document.getElementById('txt').innerHTML=m+':'+s; 

      this.t=setTimeout(function(){
        Timer();
        },500);
     }

    function myStopFunction() {
      clearTimeout(t);
    };

   </script>

  </head>

   <body>
     <div id="txt"></div>
     <button onclick="myStopFunction()">Stop time</button>
     <button onclick="StartTimer()">Start time</button>
   </body>
</html>

或者你可以在这里试试

http://plnkr.co/edit/ySOGRCvnPILNTinCriCL?p=preview

Answer 2

您可以简化很多代码，以避免使用Date对象。

此外，您已经忘记了一些var关键字以及在时间用完时停止计时器的条件。我还插入了resetTimer方法，因此如果您需要重新启动计时器两次或更多次，它将再次设置为180秒

示例代码：http://codepen.io/anon/pen/Duier

<强>代码

      var 
         // seconds
         timetoRun,             
         // cache a reference to the DOM element in which you update the timer
         timeElement, 
         // your interval
         intv;

      function Timer() {
          var ss = timetoRun % 60;
          var mm = (timetoRun / 60) | 0;  // Math.floor

          if (ss < 10) ss = '0' + ss;
          timeElement.innerHTML = [mm,ss].join(":"); 

          if (timetoRun-- > 0) {
              intv = setTimeout(Timer, 1000);
          }
          else {
              myStopFunction();
              resetTimer();
          }
      };

      function myStopFunction() {  clearInterval(intv); };

      function resetTimer() {
         timetoRun = 180  //second;
      };

      function init() { 
         resetTimer(); 
         timeElement = document.getElementById('txt');
      };

Answer 3

我认为你真的过于复杂，这里更简单的方法就是这样做http://jsfiddle.net/4Ey9Z/2/

 var timetoRun=180000; var timer, elem = document.getElementById('txt');

    function startTime(){
        timer= setInterval(function(){CountDown()},1000);
        }
    function stopTime(){
        clearInterval(timer);
    }

    function CountDown(){
         var seconds = parseInt((timetoRun/1000)%60,0)
                , minutes = parseInt((timetoRun/(1000*60))%60,0);
               timetoRun = timetoRun - 1000;
        elem.innerHTML=minutes+':'+seconds;
       if((seconds===0)&&(minutes ===0)){
            stopTime();
}

    }

使用新的Date对象在javascript中使用秒表

3 个答案: