问题描述
我已经创建了这款秒表，它运行得很好。 我唯一的问题是，每当我单击“停止”按钮时，时间就会在屏幕上停止，但仍在后台运行。
有什么办法可以阻止这种情况的发生？ 我希望计时器停止在其当前时间，然后当我单击“开始”时，它从停止的时间开始恢复。
我认为可能在更新函数之前创建一个“新Date（）”变量，并在更新函数内部创建另一个“新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>
尝试运行该代码段，您将明白我的意思。 单击“停止”后，时间不会停止“运行”，单击“开始”后，时间将恢复，就好像从未停止过一样。
1楼
Akshay Mulgavkar
1
2019-02-21 04:34:54
clearTimeout( return ID of setTimeout() );
setTimeout（）计时方法将clearTime变量作为值返回，该变量可以作为引用它的ID传递给clearTimeout（ID）-clearTimeout（clearTime）;
怎么运行的
每当在活动的setTimeout（）计时方法上调用clearTimeout（）计时方法时，clearTimeout（）计时方法将停止setTimeout（）计时方法的执行，但不会完全破坏其执行。
setTimeout（）计时方法在调用clearTimeout（）计时方法期间保持空闲状态，当您重新执行setTimeout（）计时方法时，它将从停止执行的点开始，而不是重新开始从一开始就。
你很好！
2楼
hev1
0
2019-02-23 18:55:11
您应该使用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>