A video in our JavaScript Advanced Tutorial series.
In this video we create a stopwatch that has start, pause, resume, and reset functionality. We use the setTimeout function and do some basic math and modulus.
Original source
A video in our JavaScript Advanced Tutorial series.
In this video we create a stopwatch that has start, pause, resume, and reset functionality. We use the setTimeout function and do some basic math and modulus.
Original source
29 responses to “Stopwatch / Timer – JavaScript Advanced Tutorial”
Awesome 😍🔥
Plz sir tutorial used for jquery only
This is a good tutorial but how do you make a countdown timer? I tried to set the timer= 20 and change the timer++ to timer– but it does some weird thing… The secs doesn't reset back to 0 but just keeps incrementing to 64 or 65 etc
Good video. Straight and to the point. Thanks.
is that safe ? the users can change it from the navigator ?
How do i stop the timer running after 5 seconds? So once the timer runs up to 5 seconds, I want it to stop
So I attempted to debug the reset button issue with Chrome's Developer Tools. After reset() is called, it's followed by one more iteration of increment(), which is why it stops at :01. Can anyone explain why?
Surely having the increment function call itself is horrifically inefficient, it means your declaring mins, sec and tenths again, meaning you would be using quite a lot of memory.
Thanks a lot! This really helped me.
p5.js is easier
Ahh…. i wish there would be more more than one unlike buttons
I am trying to add 4 or 5 of these stop watches on a single page, every time I hit start on one it controls the other can you offer a bit of advice?
Thanks for the video!!! At 11:50, you run into an issue where the reset button has to be hit twice to fully set the display at 00:00:00. Is there a way to resolve this issue? Thank! (I know the vid is almost 4 years old, but I am hoping that someone can help.) Thanks in advance!
I am following the code exactly and not getting an output box 🙁
Could this be modified slightly to count down instead of up? Would it just be a matter of using decrement instead of increment?
Thanks!
for people haveing trouble with the code not working beyond 60 seconds:
declare another variable right under "var time = 0"
call it "var secs = 0".
replace in increment() function "var secs = Math.floor(time/10)" with "secs++;" and ad this if statement in the increment() function "if(secs % 60 == 0){ secs = 0; }
Try Sublime Text 3…. You'll never let it go again [actually "you'll fall in love with it" sounds more appropriate but I didn't want to say that"]
Do the minutes carry over to the hours when minutes hit 60?
Jesus christ man talk with a little more enthusiasm this is almost painful.
hey! thank you for the tutorial !! can u tell me how to start and stop the timer with the spacebar instead of the mouse ?
What if I wanted to have a more accurate stopwatch by being able to see the tenth and hundredth exact digit? What would I have to change? Thanks.
I got a question, I've done EVERYTHING you've done, it's exactly the same, checked it about 5 times, but the seconds continue to count after they hit 60, is there a way to make it reset when it hits 60 so it becomes 0 again?
can I send you sum code for reviwe
Hi! Nice tutorial, extremely helpful 😀 but i got one problem, what is the code if you want to include hours? 😮
thanks for the tip
var secs = Math.floor(time/10 % 60);
that'll do the trick!
Very good video only one small problem is that seconds keeps going after it gets to 60. You need to add an if statement and reset to zero and then increment minutes.
More volume…
First to comment and I want to say: THANK YOU MATE!