在按下“停止”之后，如何停止时间运行在秒表上

Question

我已经创建了此秒表，并且运行良好。我唯一的问题是，每当我单击"停止"按钮时，时间就会停在屏幕上，但仍在后台运行。

有什么方法可以阻止这种情况发生？我希望计时器在当前时间停止，然后当我单击"启动"时，它从停止的时间恢复。

我认为可以在更新功能之前创建一个" new Date（）"变量，另一个" new Date（）"更新功能内部的变量，并以某种方式减去这些变量以获取当前日期。但是我也无法弄清楚。

start = document.getElementById('Start');
        stop = document.getElementById('Stop');
        let watchRunning = false;
        Start.addEventListener('click', startHandler);
        Stop.addEventListener('click', stopHandler);
        function startHandler() {
            if (!watchRunning) {
                watchRunning = setInterval(update, 70);
            }
        }
        function stopHandler() {
            clearInterval(watchRunning);
            watchRunning = null;
        }
        update();
        var seconds;
        var milliseconds;
        var d;
        function update() {
            d = new Date();
            seconds = d.getSeconds();
            milliseconds = Math.floor((d.getMilliseconds() / 10));
            if (milliseconds < 10 && seconds < 10) {
                document.getElementById("Time").innerHTML =
                    "0" + seconds + ".0" + milliseconds;
            } else if (milliseconds < 10 && seconds >= 10) {
                document.getElementById("Time").innerHTML =
                    seconds + ".0" + milliseconds;
            } else if (milliseconds >= 0 && seconds < 10) {
                document.getElementById("Time").innerHTML =
                    "0" + seconds + "." + milliseconds;
            } else if (milliseconds >= 0 && seconds >= 10) {
                document.getElementById("Time").innerHTML =
                    seconds + "." + milliseconds;
            }
        }

#Time {
            background-color: yellow;
            max-width: 2.3%;
        }

<h1>Stop Watch</h1>
    <button id="Start">Start</button>
    <button id="Stop">Stop</button>
    <h3>Elapsed Time:</h3>
    <p id="Time"></p>

尝试运行片段，您将明白我的意思。单击停止后，时间不会停止"运行"，当我单击"启动"时，它会像从未停止一样恢复。

Answer 1

clearTimeout( return ID of setTimeout() );

cleartime变量通过settimeout（）定时方法作为值返回，可以将其传递到cleartimeout（id）作为ID以引用它-ClearTimeOut（ClearTime）（cleartime）;

它的工作原理

每当有效的settimeout（）正时方法上调用clearTimeOut（）正时方法时，clearTimeOut（）正时方法将停止执行settimeout（）正时方法，但不会完全销毁其执行。

在调用clearTimeOut（）定时方法的时期内，settimeout（）正时方法是空闲的，当您重新执行settimeout（）正时方法时，它将从停止执行，而不是开始从一开始就开始。

你很好！

Answer 2

您应该使用setInterval运行代码以更新秒表，而不是依靠Date;您无法阻止Date更改，因此，即使您停止更新秒表，秒仍在滴答作响，这似乎使您的秒表从未停止。

#Time {
  background-color: yellow;
  max-width: 2.3%;
}

<h1>Stop Watch</h1>
<button id="Start">Start</button>
<button id="Stop">Stop</button>
<h3>Elapsed Time:</h3>
<p id="Time">00:00</p>
<script>
var start = document.getElementById('Start'), stop = document.getElementById('Stop'), time = document.getElementById('Time');
function StopWatch(props){
   this.seconds = props.seconds||0;
   this.milliseconds = props.milliseconds||0;
   this.updateCallback = props.updateCallback;
   this._running = false;
}
StopWatch.prototype = {
  start: function(){
  var _this = this;
   if(!_this._running){
   _this._running = true;
    _this._intervalID = window.setInterval(function(){
      if(++_this.milliseconds==100){
        _this.seconds++;
        _this.milliseconds = 0;
      }
      if(_this.updateCallback){
        _this.updateCallback(_this.milliseconds, _this.seconds);
      }
    }, 10);
    }
  },
  stop: function(){
    window.clearInterval(this._intervalID);
    this._running = false;
  },
  getTimeString: function(){
     var ms = this.milliseconds, s = this.seconds;
     if(ms<10){
      ms = "0"+ms;
     }
     if(s<10){
      s = "0"+s;
     }
     return s + ":" + ms;
  }
}
var sw = new StopWatch({updateCallback: function(){
  time.textContent = sw.getTimeString();
}});
start.addEventListener('click', function(){
sw.start();
});
stop.addEventListener('click', function(){
sw.stop();
});
</script>