DEV Community

Cover image for Create a Stopwatch in JavaScript
GSPTeck
GSPTeck

Posted on • Updated on

Create a Stopwatch in JavaScript

Creating a timer is a very simple task. We will only be using variables, functions and THAT'S IT!

HTML code:

<html>
    <head>
        <title>JavaScript</title>

        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <div id="stopwatch">
            00:00:00
        </div>

        <ul id="buttons">
            <li><button onclick="startTimer()">Start</button></li>
            <li><button onclick="stopTimer()">Stop</button></li>

            <li><button onclick="resetTimer()">Reset</button></li>
        </ul>

        <script src="main.js"></script>
    </body>
</html>
Enter fullscreen mode Exit fullscreen mode

CSS code:

body {
    background: #202020;
    color: white;
}
button {
    width: 100px;
    height: 30px;
    border: 3px soldi white;
    border-radius: 50px;
    background: #202020;
    color: white;
    cursor: pointer;
    outline: none;
}

#stopwatch {
    font-size: 100px;
    position: absolute;
    top: 45%;
    left: 50%;
    transform: translate(-50%, -55%);
}
#buttons {
    position: absolute;
    top: 55%;
    left: 48.4%;
    transform: translate(-51.6%, -45%);
}
#buttons li {
    display: inline;
    padding-left: 10px;
}
Enter fullscreen mode Exit fullscreen mode

JavaScript code:

const timer = document.getElementById('stopwatch');

var hr = 0;
var min = 0;
var sec = 0;
var stoptime = true;

function startTimer() {
  if (stoptime == true) {
        stoptime = false;
        timerCycle();
    }
}
function stopTimer() {
  if (stoptime == false) {
    stoptime = true;
  }
}

function timerCycle() {
    if (stoptime == false) {
    sec = parseInt(sec);
    min = parseInt(min);
    hr = parseInt(hr);

    sec = sec + 1;

    if (sec == 60) {
      min = min + 1;
      sec = 0;
    }
    if (min == 60) {
      hr = hr + 1;
      min = 0;
      sec = 0;
    }

    if (sec < 10 || sec == 0) {
      sec = '0' + sec;
    }
    if (min < 10 || min == 0) {
      min = '0' + min;
    }
    if (hr < 10 || hr == 0) {
      hr = '0' + hr;
    }

    timer.innerHTML = hr + ':' + min + ':' + sec;

    setTimeout("timerCycle()", 1000);
  }
}

function resetTimer() {
    timer.innerHTML = '00:00:00';
}
Enter fullscreen mode Exit fullscreen mode

Edit:
As pointed out by 'uthx' in the comments we need to add a function to reset the values of sec, min and hr when resetting the time. We can do that by using the following function (function coded by 'uthx'):

function resetTimer() {
    timer.innerHTML = "00:00:00";
    stoptime = true;
    hr = 0;
    sec = 0;
    min = 0;
}
Enter fullscreen mode Exit fullscreen mode

Final Result:
Alt Text
(Naturally it works. Tested it myself 😉)

Explanation

Disclaimer! In the code you may notice it's called a 'timer' and not 'stopwatch', that's because 'timer' is shorter than 'stopwatch' and I don't feel like having to type that all the time 😂.

  • const timer = document.getElementById('stopwatch'); imports the timer 'div' as a variable, using it's id, so we can modify it as we wish.
  • var hr = 0; var min = 0; var sec = 0; we are creating the hour, minute and second variables and we are declaring that their initial value is 0.
  • var stoptime = true; we create a variable so we can then verify if the stopwatch is running or not.
  • if (stoptime == true) { stoptime = false; timerCycle(); } if the stopwatch is not running, turn it on and go to the timerCycle() function. (This only runs if we click the 'Start' button)
  • if (stoptime == false) { stoptime = true; } if the stopwatch is running, turn it off. (This only runs if we click the 'Stop' button)
  • if (stoptime == false) { verify that the stopwatch is on.
  • sec = parseInt(sec); min = parseInt(min); hr = parseInt(hr); these are used to parse a string into an integer. (if we have 1045 as a string and we want to use it as an integer, we parse it)
  • sec = sec + 1; add 1 to seconds.
  • if (sec == 60) { if seconds are equal to 60, minutes = 1 and seconds becomes 0 again.
  • if (min == 60) { if minutes are equal to 60, hours = 1 and seconds + minutes becomes 0 again.
  • Fun part:
if (sec < 10 || sec == 0) {
   sec = '0' + sec;
}
if (min < 10 || min == 0) {
   min = '0' + min;
}
if (hr < 10 || hr == 0) {
   hr = '0' + hr;
}
Enter fullscreen mode Exit fullscreen mode

If seconds, minutes and/or hours are lower than 10, add a 0 in front. This is why we need to parse everything in the beginning: doing this operation they become strings.

  • timer.innerHTML = hr + ':' + min + ':' + sec; add these values to the 'timer' div.
  • setTimeout("timerCycle()", 1000); this will make sure there is a timeout of 1000 ms (1s) before repeating the 'timerCycle()'.
  • timer.innerHTML = '00:00:00'; used to reset the timer to 00:00:00

AND WE'RE DONE!

Learn how to earn money as a developer HERE.

Discussion (20)

Collapse
ibnsamy96 profile image
Mahmoud Ibn Samy

It's a good implementation but I think by the time it won't represent the real-time as the 'setTimeout()' function won't run after an exact second, there will be some small lag.
I think it will be better if you made use of the Date object.

Collapse
gspteck profile image
GSPTeck Author

That's a great idea, but at the moment I don't know how to do that.
If I ever learn how to do it, I might update the post.

Collapse
saraswat_dev profile image
Saraswat Majumder

Why did you use a string inside settimeout ? setTimeout(timer,1) works too

Collapse
gspteck profile image
GSPTeck Author

I just decided to use that at the time, but yeah that works too.

Collapse
kimbrother6 profile image
kimbrother6

This is a very good post!!!
However, there are times when the code runs in the timerCycle function. If I run the function again after exactly 1 second, wouldn't the time be wrong? Or is it not the time to be so concerned?

Collapse
rdrahuldhiman profile image
Rahul Dhiman

Reset Functionality is not fully implemented.

Collapse
gspteck profile image
GSPTeck Author

What do you mean? Reset just makes the string 00:00:00 again. What isn't implemented?

Collapse
rdrahuldhiman profile image
Rahul Dhiman

It is just resetting the UI Part but not the actual variables which are still storing the old time values. Below is what i did to get it working.
function resetTimer() {
timer.innerHTML = "00:00:00";
stoptime = true;
hr = 0;
sec = 0;
min = 0;
}

Thread Thread
gspteck profile image
GSPTeck Author

yeah you are right! missed that lol

Collapse
harshvats2000 profile image
HARSH VATS

Your code might work but I really don't think it's good level of code bcoz it's not understandable easily for someone else analysing it.
Have a look at mine and decide yourself which one is better.
jsfiddle.net/2vwcd3a8/

Collapse
l42ph profile image
L42ph

Found this when I was searching for a simple stopwatch. It's a nice starting point, but as others said, setTimeout() isn't 100% reliable, so I've made a version that uses performance.now() to keep track of time. It might be best to use window.requestAnimationFrame() for the most stable update frequency, but then you'll always have 60 cycles per second, and you might not need/want that many.
Also, I wanted to have millisecond precision, and the ability to start the timer delayed, so you can 'alt-tab to another window' / 'activate another tab in your browser' before it starts!
Please don't bother commenting on code readability, cuz I don't care for that, it's purely for functionality.

jsfiddle.net/Larph/he10jyu9/

Collapse
ubongs profile image
Ubong Sylvester

Great post. Thanks for this. You can clearTimeout to remove the lag when you stop/reset the timer.

Created a global variable
let startTimeout;

then in the timerCycle() function, initiate the timeout with
startTimeout = setTimeout('timerCycle()', 1000);

Create this function for stopping timer cycle
function stopTimerCycle() {
clearTimeout(startTimeout);
}

then Add stopTimercycle() and "function stopTimer()" to "function resetTimer()"

Collapse
praveenkalady profile image
praveen

Great post bro

Collapse
gspteck profile image
GSPTeck Author

Thank you!

Collapse
luishnzg profile image
luishnzg

Thank you! I am trying to learn javascript and I need more of these projects explained.

Collapse
gspteck profile image
GSPTeck Author

Very happy I could help!

Collapse
hansdenotter profile image
hansdenotter

How can I learn to do this kind of projects myself instead of copying the code?

Collapse
gspteck profile image
GSPTeck Author

If you don't have a lot of programming experience it will be hard to just work on projects without any online help. I personally still looked up stuff on the internet for this project as I do for every project.

Collapse
himanshuhunk profile image
himanshuhunk

how to restart timer?

Collapse
gspteck profile image
GSPTeck Author

There is a "resetTimer()" function which will reset the timer.