how to reset Javascript minute countdown timer
Question
I found this vanilla JS count down timer that really suits my needs. http://jsfiddle.net/wr1ua0db/17/
`<body>
<div>Registration closes in <span id="time">05:00</span> minutes!</div>
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;
if (--timer < 0) {
timer = duration;
}
}, 1000);
}
window.onload = function () {
var fiveMinutes = 60 * 5,
display = document.querySelector('#time');
startTimer(fiveMinutes, display);
};
I am looking for a reset function that I could assign to buttons or events. I mean a function that would NOT stop the timer... just reset it back to 5:00 ... so it would automatically go to 4:59... 4:58 ... etc
3 answers
solution1
7 ACCPTED 2018-01-26 17:35:56
If you move timer variable to parent scope you'll have access to it from other functions. Then you can reset it in a function called resetTimer . See below:
var timer;
function startTimer(duration, display) {
timer = duration;
var 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;
if (--timer < 0) {
timer = duration;
}
}, 1000);
}
function resetTimer() {
timer = 60 * 5;
}
window.onload = function () {
fiveMinutes = 60 * 5,
display = document.querySelector('#time');
startTimer(fiveMinutes, display);
};
solution2
3 2020-01-13 03:46:36
Try this one. It starts a timer on load and gives you the ability to reset to the initial state.
<style>
#reset:hover {
cursor: pointer;
}
</style>
<div>Time left = <span id="timer">05:00</span><span id="reset" title="Reset Timer"> ↺</span></div>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
var upgradeTime = 300; // seconds
var seconds = upgradeTime;
function timer() {
var days = Math.floor(seconds / 24 / 60 / 60);
var hoursLeft = Math.floor((seconds) - (days * 86400));
var hours = Math.floor(hoursLeft / 3600);
var minutesLeft = Math.floor((hoursLeft) - (hours * 3600));
var minutes = Math.floor(minutesLeft / 60);
var remainingSeconds = seconds % 60;
function pad(n) {
return (n < 10 ? "0" + n : n);
}
document.getElementById('timer').innerHTML = pad(minutes) + ":" + pad(remainingSeconds);
if (seconds == 0) {
clearInterval(countdownTimer);
document.getElementById('timer').innerHTML = "Completed";
document.getElementById('reset').style.visibility = 'hidden';
} else {
seconds--;
}
}
var countdownTimer = setInterval('timer()', 1000);
// function resetTimer() {
// seconds = upgradeTime;
// }
$("#reset").click(function() {
seconds = upgradeTime;
});
</script>
solution3
0 2018-01-26 17:29:07
Use something like addEventListener and call the named function.
(function() { 'use strict'; let reset = document.getElementById('reset'); reset.addEventListener('click', function() { alert('reset'); //add here the function name to call them. }) })();
<button id="reset">Reset</buton>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.