在 javascript 中创建一个自动重新加载的倒数计时器
[英]creating a countdown timer in javascript with automatic reload
问题描述
三个问题，我的开始按钮同时启动了多个定时器，而不是多次点击才启动一次。 其次，我的停止按钮不起作用。 和我的重置按钮，更改文本但不会停止计时器。 这是我的代码：
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>
1 个解决方案
解决方案1
2 2022-04-17 18:31:15
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 创建一个可以启动和停止的倒数计时器
[英]Creating a countdown timer with Javascript that can be started and stopped
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.