Javascript Countdown Timer (Simple & Accurate)
There are many ways to write a Javascript base countdown timer with minutes and seconds. Today we are focusing on building simple vanilla javascript timer which you can use for shopping cart timeout, marketing timeouts, or any other timer action.
Final Code
Below is the final code of this project. If you cannot understand it please read the Explanation below where I break down this Javascript timer into small parts for you to understand it better.
HTML
<div>
Time Remaining <span id="timer"> </span>
</div>
JavasScript
window.onload = function () {
const timeInSeconds = 5
const element = document.querySelector('#timer');
countdown(timeInSeconds, element);
};
function countdown(timeInSeconds, element) {
let timer = timeInSeconds;
let minutes;
let seconds;
let timerInterval = setInterval(function () {
minutes = parseInt(timer / 60, 10);
seconds = parseInt(timer % 60, 10);
minutes = minutes < 10 ? "0" + minutes : minutes;
seconds = seconds < 10 ? "0" + seconds : seconds;
element.textContent = minutes + ":" + seconds;
if (--timer < 0) {
clearInterval(timerInterval);
}
}, 1000);
}
Explanation
Initialize the timer
window.onload = function () {
const timeInSeconds = 5
const element = document.querySelector('#timer');
countdown(timeInSeconds, element);
};
Here we trigger the function() when the page is loaded. And then set our total time in seconds and select the element where we need to show our timer. Finally, we call our countdown timer to do its work.
Variable definitions
let timer = timeInSeconds;
let minutes;
let seconds;
We need three variables to run our javascript timer as below.
timer = holds the remaining time
minutes = holds the remaining minutes in the time
seconds = holds the remaining seconds in the time
Keep it ticking
let timerInterval = setInterval(function () {
//
}, 1000);
We use the setInterval function of javascript to automatically run our code every second (1000 milliseconds)
The magic part
minutes = parseInt(timer / 60, 10);
seconds = parseInt(timer % 60, 10);
minutes = minutes < 10 ? "0" + minutes : minutes;
seconds = seconds < 10 ? "0" + seconds : seconds;
element.textContent = minutes + ":" + seconds;
if (--timer < 0) {
clearInterval(timerInterval);
}
Now with all the variables and the ticking mechanism in place. We can do the countdown.
First, we format the minutes and seconds in the total remaining time. Then we show the formatted minutes and seconds inside the element which was passed to the countdown function.
Finally, we reduce the total seconds by 1 and if it goes negative we stop the timer.
Don't forget to leave a comment if this was helpful 😊
Comments