I have another post on creating a digital clock. Similar to that example, we’ll use setTimeout method from JavaScript to create the stopwatch.
HTML
Let’s start with simple HTML.
CSS
Let’s make that ugly HTML somewhat pretty.
JavaScript
Let’s add the variables first.
The variable msec is set as 0 while sec, min and hour variables are set as 1. That’s because we need the microseconds starting from 0 but others will be dependent on microseconds and will be increased by 1. It’ll make more sense once you set it to a zero! You live, you learn!
Also, we need a variable to keep track of the timer, if it’s ON or OFF. That’ why we used timerOn which is OFF(0) initially.
Let’s add the function to start and stop the stopwatch and a function to update the value of microseconds.
That’s working like a charm.
Now, let’s call a function when the microseconds reach at 10 to update the seconds. Similarly, we will create a function to update minutes and hours.
Here’s the code and the demo.
basics functions microseconds setTimeout stopwatch
