How to Create a Stopwatch Using JavaScript?

Sometimes, we want to create a stopwatch using JavaScript.

In this article, we’ll look at how to create a stopwatch using JavaScript.

Create a Stopwatch Using JavaScript

To create a stopwatch using JavaScript, we can add the HTML and JavaScript code for the timer display and the buttons to start, stop and reset the timer.

For instance, we write:

<h1>
  <span id="hour">00</span> :
  <span id="min">00</span> :
  <span id="sec">00</span> :
  <span id="millisec">00</span>
</h1>

<button onclick="startStop()" id="start">Start</button>
<button onclick="reset()">Reset</button>

to add the HTML code for the stopwatch timer display and the buttons to control the stopwatch.

Then we write:

let x;
let startstop = 0;


const start = () => {
  x = setInterval(timer, 10);
} /* Start */

const stop = () => {
  clearInterval(x);
}

let millisec = 0;
let sec = 0;
let min = 0;
let hour = 0;
let miliSecOut = 0;
let secOut = 0;
let minOut = 0;
let hourOut = 0;

const checkTime = (i) => {
  if (i < 10) {
    i = "0" + i;
  }
  return i;
}

const timer = () => {
  milliSecOut = checkTime(millisec);
  secOut = checkTime(sec);
  minOut = checkTime(min);
  hourOut = checkTime(hour);

  millisec = ++millisec ;

  if (millisec  === 100) {
    millisec = 0;
    sec = ++sec;
  }

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

  if (min == 60) {
    min = 0;
    hour = ++hour;

  }


  document.getElementById("millisec").innerHTML = milliSecOut;
  document.getElementById("sec").innerHTML = secOut;
  document.getElementById("min").innerHTML = minOut;
  document.getElementById("hour").innerHTML = hourOut;

}


const reset = () => {
  millisec = 0;
  sec = 0;
  min = 0
  hour = 0;

  document.getElementById("millisec").innerHTML = "00";
  document.getElementById("sec").innerHTML = "00";
  document.getElementById("min").innerHTML = "00";
  document.getElementById("hour").innerHTML = "00";
}


const startStop = () => {
  startstop = startstop + 1;

  if (startstop === 1) {
    start();
    document.getElementById("start").innerHTML = "Stop";
  } else if (startstop === 2) {
    document.getElementById("start").innerHTML = "Start";
    startstop = 0;
    stop();
  }
}

We define x to store the timer for updating the stopwatch time count.

startstop stores the stopwatch toggle state.

Then we create the start function that calls setInterval that calls the timer function every 10 milliseconds to run the timer.

The stop function calls clearInterval to stop the timer.

Next, we define variables to store the elapsed time.

In the timer function, we call checkTime to prepend a 0 before i if i is less than 10 and return that result.

We call that for all time variables in the timer function.

Then we update the millisec variable to update the elapsed time in milliseconds.

Next, we update the millisec, sec, and min variables to update the milliseconds, seconds and minutes parts of the elapsed time respectively.

Then we update the display of the stopwatch by setting the innerHTML property of all the elements.

After that, we define the reset function to reset all the values to 0 and update the corresponding elements.

Next, we create the startStop function to toggle the timer on and off.

If it’s 1, we start the timer by calling the start function.

And we update the start button to show Stop.

If it’s 2, then we update the start button to show Start and we call stop to stop the timer.

And we also reset the startstop state to 0.

startStop and reset are called when we click the Start/Stop and Reset buttons respectively.

Conclusion

To create a stopwatch using JavaScript, we can add the HTML and JavaScript code for the timer display and the buttons to start, stop and reset the timer.