4

我正在制作一个计时器，并且已经让它工作了一个负载。我想为其添加一个开始、停止和重置按钮。这是我的代码，就像 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;
         }
     }
   }

 })();

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

4

2 回答 2

7 
(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;
    }
  }

})();
于 2013-08-08T08:59:49.563 回答
0 
    <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>
于 2013-08-08T09:10:13.873 回答