为计时器添加开始、停止和重置按钮答案

【问题标题】：Adding start, stop, and reset buttons for a timer为计时器添加开始、停止和重置按钮
【发布时间】：2013-08-08 08:53:10
【问题描述】：

我正在制作一个计时器，并且已经让它工作了一个负载。我想为其添加一个开始、停止和重置按钮。这是我的 atm 代码。

    (function() {
         "use strict";
         var secondsLabel = document.getElementById('seconds'),
         minutesLabel = document.getElementById('minutes'),
         hoursLabel = document.getElementById('hours'),
         totalSeconds = 0,
         startButton = document.getElementById('start'),
         resetButton = document.getElementById('reset'),
         onOff = 0; 
         startButton.onclick = function() {
         onOff = 1;
     };
     resetButton.onclick = function() {
         totalSeconds = 0;
         onOff = 0;
     };

     if ( onOff == 1 ) {
         setInterval( setTime, 1000 );
         function setTime() {
         totalSeconds++;
         secondsLabel.innerHTML = pad( totalSeconds % 60 );
         minutesLabel.innerHTML = pad( parseInt( totalSeconds / 60 ) );
         hoursLabel.innerHTML = pad( parseInt( totalSeconds / 3600 ) )
     }
     function pad( val ) {
         var valString = val + "";
         if( valString.length < 2 ) {
            return "0" + valString;
         } else {
            return valString;
         }
     }
   }

 })();

但是，这些按钮无法正常工作。我不确定这是否也是实现目标的最佳解决方案，因此欢迎提出建议。

【问题讨论】：

this.tId=setInterval... 现在您可以执行 clearInterval(this.tId) 停止

标签： javascript

【解决方案1】：

(function() {
  "use strict";
  var secondsLabel = document.getElementById('seconds'), minutesLabel = document.getElementById('minutes'), hoursLabel = document
      .getElementById('hours'), totalSeconds = 0, startButton = document.getElementById('start'), stopButton = document.getElementById('stop'), resetButton = document
      .getElementById('reset'), timer = null;

  startButton.onclick = function() {
    if (!timer) {
      timer = setInterval(setTime, 1000);
    }
  };

  stopButton.onclick = function() {
    if (timer) {
      clearInterval(timer);
      timer = null;
    }
  };

  resetButton.onclick = function() {
    if (timer) {
      totalSeconds = 0;
      stop();
    }
  };

  function setTime() {
    totalSeconds++;
    secondsLabel.innerHTML = pad(totalSeconds % 60);
    minutesLabel.innerHTML = pad(parseInt(totalSeconds / 60));
    hoursLabel.innerHTML = pad(parseInt(totalSeconds / 3600))
  }

  function pad(val) {
    var valString = val + "";
    if (valString.length < 2) {
      return "0" + valString;
    } else {
      return valString;
    }
  }

})();

【讨论】：

如何停止计时器。
要么单击重置按钮，要么创建另一个执行 clearInterval() 的函数，如 stop() 函数
我会在 startButton() 中添加什么以便在我按下停止时恢复计时器？
我添加了停止功能。 startButton 没有变化
00 是否在“00”之类的引号中？

【解决方案2】：

    <html>
<head>
<script type="text/javascript">
var c=0;
var t;
var timer_is_on=0;

function timedCount()
{
document.getElementById('txt').value=c;
c=c+1;
t=setTimeout("timedCount()",1000);
}

function doTimer()
{
if (!timer_is_on)
  {
  timer_is_on=1;
  timedCount();
  }
}

function stopCount()
{
clearTimeout(t);
timer_is_on=0;
}
</script>
</head>
<body>
<form>
<input type="button" value="Start count!" onclick="doTimer()" />
<input type="text" id="txt" />
<input type="button" value="Stop count!" onclick="stopCount()" />
</form>
<p>
Click on the "Start count!" button above to start the timer. The input field will count forever, starting at 0. Click on the "Stop count!" button to stop the counting. Click on the "Start count!" button to start the timer again.
</p>
</body>
</html>

【讨论】：

要添加重置按钮，我可以设置 c = 0 吗？