• Tuesday , 25 February 2020

Stopwatch / Timer – JavaScript Advanced Tutorial

Code Canyon



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

3d Ocean

Related Posts

29 Comments

  1. Shaksham agarwal
    August 5, 2019 at 03:08

    Awesome 😍🔥

  2. Suman Kumari
    August 5, 2019 at 03:08

    Plz sir tutorial used for jquery only

  3. piano0011 Lee
    August 5, 2019 at 03:08

    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

  4. CmdrColstel
    August 5, 2019 at 03:08

    Good video. Straight and to the point. Thanks.

  5. مبرمج المال AMP
    August 5, 2019 at 03:08

    is that safe ? the users can change it from the navigator ?

  6. Nadia Ali
    August 5, 2019 at 03:08

    How do i stop the timer running after 5 seconds? So once the timer runs up to 5 seconds, I want it to stop

  7. Mike Fincher
    August 5, 2019 at 03:08

    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?

  8. Jonathan Woollett-Light
    August 5, 2019 at 03:08

    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.

  9. Tendani Matumba
    August 5, 2019 at 03:08

    Thanks a lot! This really helped me.

  10. Chris K
    August 5, 2019 at 03:08

    p5.js is easier

  11. Hasnain Khan
    August 5, 2019 at 03:08

    Ahh…. i wish there would be more more than one unlike buttons

  12. Valhalla Muscle
    August 5, 2019 at 03:08

    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?

  13. Alex Thomas
    August 5, 2019 at 03:08

    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!

  14. Sirin
    August 5, 2019 at 03:08

    I am following the code exactly and not getting an output box 🙁

  15. xderiwx
    August 5, 2019 at 03:08

    Could this be modified slightly to count down instead of up? Would it just be a matter of using decrement instead of increment?

    Thanks!

  16. Favo SA
    August 5, 2019 at 03:08

    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; }

  17. zero gamer
    August 5, 2019 at 03:08

    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"]

  18. Bilal Uddin
    August 5, 2019 at 03:08

    Do the minutes carry over to the hours when minutes hit 60?

  19. Carson Clark
    August 5, 2019 at 03:08

    Jesus christ man talk with a little more enthusiasm this is almost painful. 

  20. Kdvinmk TheCUBER
    August 5, 2019 at 03:08

    hey! thank you for the tutorial !! can u tell me how to start and stop the timer with the spacebar instead of the mouse ?  

  21. Glen Hammer
    August 5, 2019 at 03:08

    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. 

  22. LightOfDivine
    August 5, 2019 at 03:08

    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? 

  23. Nephi Hill
    August 5, 2019 at 03:08

    can I send you sum code for reviwe

  24. Martin Eriksson
    August 5, 2019 at 03:08

    Hi! Nice tutorial, extremely helpful 😀 but i got one problem, what is the code if you want to include hours? 😮

  25. Pspl4yer
    August 5, 2019 at 03:08

    thanks for the tip

  26. Tapizquent
    August 5, 2019 at 03:08

    var secs = Math.floor(time/10 % 60);

    that'll do the trick!

  27. David Schenk
    August 5, 2019 at 03:08

    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.

  28. Hassan El Mghari
    August 5, 2019 at 03:08

    More volume…

  29. Explorer
    August 5, 2019 at 03:08

    First to comment and I want to say: THANK YOU MATE!

Leave A Comment

You must be logged in to post a comment.