creating a countdown timer in javascript with automatic reload

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>

creating a countdown timer in javascript with automatic reload

Question

1 answers

solution1
2 2022-04-17 18:31:15

creating a countdown timer in javascript with automatic reload

Question

1 answers

solution1 2 2022-04-17 18:31:15

solution1
2 2022-04-17 18:31:15