Sometimes, we want to create a plain count up timer in JavaScript.
In this article, we’ll look at how to create a plain count up timer in JavaScript.
How to create a plain count up timer in JavaScript?
To create a plain count up timer in JavaScript, we use the setInterval function.
For instance, we write
<label id="minutes">00</label>:<label id="seconds">00</label>
to add the label elements for the minutes and seconds displays.
Then we write
const minutesLabel = document.getElementById("minutes");
const secondsLabel = document.getElementById("seconds");
let totalSeconds = 0;
const setTime = () => {
++totalSeconds;
secondsLabel.innerHTML = (totalSeconds % 60).toString().padStart(2, "0");
minutesLabel.innerHTML = parseInt(totalSeconds / 60)
.toString()
.padStart(2, "0");
};
setInterval(setTime, 1000);
to select the elements with getElementById.
Then we define the setTime function that updates the elements by getting the seconds with totalSeconds % 60.
We prepend a 0 before it when its length is less than 2.
Likewise, we get the minutes with totalSeconds / 60 and call padStart to prepend a 0 before it when its length is less than 2.
We set innerHTML of the elements to display the numbers.
Conclusion
To create a plain count up timer in JavaScript, we use the setInterval function.
