在 javascript 中创建一个自动重新加载的倒数计时器

Question

Three problems, my start button starts more than one timer at the same time instead of only once for multiple clicks to start.三个问题，我的开始按钮同时启动了多个定时器，而不是多次点击才启动一次。 Second, my stop button doesn't work.其次，我的停止按钮不起作用。 and my reset button, changes the text but doesnt stop the timer.和我的重置按钮，更改文本但不会停止计时器。 Here's my code:这是我的代码：

 function stopTimer(timer) { clearInterval(timer); } function resetTimer(duration, display) { var timer = duration, minutes, seconds; minutes = parseInt(timer / 60, 10); seconds = parseInt(timer % 60, 10); minutes = minutes < 10? "0" + minutes: minutes; seconds = seconds < 10? "0" + seconds: seconds; display.textContent = minutes + ":" + seconds; } function startTimer(duration, display) { var timer = duration, minutes, seconds; setInterval(function() { minutes = parseInt(timer / 60, 10); seconds = parseInt(timer % 60, 10); minutes = minutes < 10? "0" + minutes: minutes; seconds = seconds < 10? "0" + seconds: seconds; display.textContent = minutes + ":" + seconds; // Beep when counter reaches zero if (--timer < 0) { timer = duration; var context = new AudioContext(); var oscillator = context.createOscillator(); oscillator.type = "sine"; oscillator.frequency.value = 800; oscillator.connect(context.destination); oscillator.start(); setTimeout(function() { oscillator.stop(); }, 100); } }, 1000); } var time_in_seconds = 5; display = document.querySelector('#time'); document.getElementById("start").addEventListener("click", function() { startTimer(time_in_seconds, display); }); document.getElementById("stop").addEventListener("click", function() { stopTimer(timer); }); document.getElementById("reset").addEventListener("click", function() { resetTimer(time_in_seconds, display); });

 <html> <body> <div id="time">00:10</div> <button id="start">Start</button> <button id="stop">Stop</button> <button id="reset">Reset</button> <script> </script> </body> </html>

Answer 1

 var duration = 5; var timer_id = null; var timer_seconds = duration; var timer_active = 0; var display = document.querySelector('#time'); function BeepOnce() { timer_seconds = duration; var context = new AudioContext(); var oscillator = context.createOscillator(); oscillator.type = "sine"; oscillator.frequency.value = 800; oscillator.connect(context.destination); oscillator.start(); setTimeout(function() { oscillator.stop(); }, 100); } function UpdateDisplay() { var minutes = parseInt(timer_seconds / 60, 10); var seconds = parseInt(timer_seconds % 60, 10); minutes = minutes < 10? "0" + minutes: minutes; seconds = seconds < 10? "0" + seconds: seconds; display.textContent = minutes + ":" + seconds; } function TimerReset() { timer_seconds = duration; timer_active = 1; UpdateDisplay(); } function TimerStart() { timer_seconds = duration; timer_active = 1; UpdateDisplay(); } function TimerStop() { timer_active = 0; /*clearInterval(timer_id);*/ } function TimerInit() { UpdateDisplay(); var fun1 = function() { if (timer_active) { // Beep at Zero Seconds if (--timer_seconds < 0) { BeepOnce(); TimerReset(); } // Countdown else { UpdateDisplay(); } } } //called timer every second timer_id = setInterval(fun1, 1000); } TimerInit(); document.getElementById("start").addEventListener("click", function() { TimerStart(); }); document.getElementById("stop").addEventListener("click", function() { TimerStop(); }); document.getElementById("reset").addEventListener("click", function() { TimerReset(); });

 <html> <body> <div id="time">00:10</div> <button id="start">Start</button> <button id="stop">Stop</button> <button id="reset">Reset</button></body> </html>

在 javascript 中创建一个自动重新加载的倒数计时器

问题描述

1 个解决方案

解决方案1
2 2022-04-17 18:31:15

在 javascript 中创建一个自动重新加载的倒数计时器

问题描述

1 个解决方案

解决方案1 2 2022-04-17 18:31:15

解决方案1
2 2022-04-17 18:31:15