添加计时器的开始，停止和重置按钮 [英] Adding start, stop, and reset buttons for a timer

问题描述

我正在制作一个计时器，使它已经可以工作一个负载.我想添加一个开始，停止和重置按钮.这是我的代码，就像atm一样.

I'm making a timer and have it working already one load. I want to add a start, stop, and reset button to it. This is my code as is 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;
         }
     }
   }

 })();

但是这些按钮在atm上不起作用.我不确定这是否也是实现该目标的最佳解决方案，因此欢迎提出建议.

The buttons are not working atm however. I'm not sure if this the best solution for the goal as well, so suggestions are welcome.

推荐答案

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

})();

这篇关于添加计时器的开始，停止和重置按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！