Yogesh Chauhan's Blog

How to create a simple stopwatch using JavaScript?

in JavaScript on March 30, 2021

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.


Most Read

#1 Solution to the error “Visual Studio Code can’t be opened because Apple cannot check it for malicious software” #2 How to add Read More Read Less Button using JavaScript? #3 How to check if radio button is checked or not using JavaScript? #4 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #5 How to uninstall Cocoapods from the Mac OS? #6 PHP Login System using PDO Part 1: Create User Registration Page

Recently Posted

#Apr 8 JSON.stringify() in JavaScript #Apr 7 Middleware in NextJS #Jan 17 4 advanced ways to search Colleague #Jan 16 Colleague UI Basics: The Search Area #Jan 16 Colleague UI Basics: The Context Area #Jan 16 Colleague UI Basics: Accessing the user interface
You might also like these
CSS Attribute SelectorsCSSWhat are Null Sessions?MiscellaneousPHP arrays for US states’ full names and abbreviationsPHPDoes :is() pseudo selector hint at CSS preprocessing in the future?CSSA short basic guide on states in ReactReact3 Types of Arrays in PHPPHPfirst-of-type and last-of-type selectors in CSSCSSHow to create ‘share on LinkedIn’ link using just HTML?HTMLAdvanced Array Methods in JavaScript (with examples)JavaScriptHow to remove N/A from Radio Button list in Drupal?DrupalWhat Does Host-Based Intrusion Detection System (HIDS) Mean and What Are Some Advantages Over NIDS?MiscellaneousHow to scroll contents of a an element vertically using JavaScript?JavaScript