In this article you will learn how to make a simple stop watch using JavaScript. Stopwatch is a simple JavaScript project that is important enough ...
Some comments have been hidden by the post's author - find out more
For further actions, you may consider blocking this person and/or reporting abuse
Hi!
Would you, please, edit your article and fix the typo, where you explain about the minutes' if statement.
"The third time I used the 'if' function I executed the time in minutes. When the minute time reaches 80, you will see 0 in the minute cell and 1 in the hour cell."
"80" should be "60" as it is in the code below.
You may delete my comment, afterwards.
That's one great and at the same time simple enough exercise/project! Thank you!
Thank you for saying
This is a typing mistake. Now I have edited it.
Yeah, my thoughts exactly - a typo.
You are welcome!
And keep sharing your development experiences. I enjoyed the article very much.
While reading it, I was imagining drawing some pixel art sprites for the numbers and it didn't go far enough to whether should I use them in a canvas element for the rendering of a coundown-timer. It sounded like a neat idea in my imagination. Like an old arcade game, having a countdown timer for its levels or something...
Not exactly a stopwatch like in your project, although the time and its displaying would be using similar techniques. Well, for a full game there are other considerations, like the game, and animations' loops. Usually different counters are used for those, which may regulate the framerates, animations, AI actions, inputs reading... It's a whole Universe, there. For the time being I was thinking only around one UI element - a countdown timer.
Hello Everyone, my reset button is not working
May you help me
let [milliseconds, seconds, minutes, hours] = [0, 0, 0, 0]
let timerRef = document.querySelector(".timer-display")
let int = null
document.getElementById("start-timer").addEventListener("click", () => {
if (int!==null) {
clearInterval(int)
}
int = setInterval(displayTimer, 10)
})
document.getElementById("pause-timer").addEventListener("click", () => {
clearInterval(int)
})
document.getElementById("reset-timer").addEventListener("click", () => {
clearInterval(int)[milliseconds, seconds, minutes, hours] = [0, 0, 0, 0]
timerRef.innerHTML = "00 : 00 : 00 : 000 "
})
function displayTimer() {
milliseconds += 10
if (milliseconds == 1000) {
milliseconds = 0
seconds++
if (seconds == 60) {
seconds = 0
minutes++
if (minutes == 60) {
minutes = 0
hours++
}
}
}
let h = hours < 10 ? "0" + hours : hours
let m = minutes < 10 ? "0" + minutes : minutes
let s = seconds < 10 ? "0" + seconds : seconds
let ms =
milliseconds < 10
? "00" + milliseconds
: milliseconds < 100
? "0" + milliseconds
: milliseconds
}
HTML
<!DOCTYPE html>
StopWatch
00 : 00 : 00 : 000
Start
Pause
Reset
I really like the UI. It looks very good. Keep up the great work! :)
Thank you
I've tried to create the stopwatch but it's giving error in time adjustment , don't know why ... any suggestions ? best tantrik in Nowrangapur
Nice
Thanks for this valuable content!
You are welcome 😊
Great job.
Thank you
It's very simple and a like your step-by-step tutorial. I'll like to try this on my own. Thanks.
welcome
nice!
Thank you @gnugautama
This is awesome work! Thank you for sharing!
Welcome 😍
Cool!
Very clean code. Thank you!
Great job. Congratulations
Thank you 😊
I like the article. You did a good job on it.
Welcome 😊
Concept of adding 10 in millisecond,
I didn't get it.
Help me to find the solution.