How to Create Stopwatch in Javascript

In this tutorial, you will learn how to create stopwatch using javascript. As you already know, a stopwatch is used to measure the amount of time lapsed.

To create a stopwatch in javascript, you have to be good with timer methods setTimeout() and setInterval().  For a newbie, it is going to be very tricky and hard to create from scratch.

Just to keep things simple, we are going to use the third-party library EasyTimer JS. With the help of this library, you can display time in seconds, minutes, hours, and days.  It contains a lot of helpful methods such as start(), stop(), pause() and reset().

I would recommend you to check out EasyTimer JS docs to learn more about its usage.

In the following example, we will start, pause, and stop the timer upon click of a button. Please have a look over the code example and the steps given below.


  • We have 3 elements in the HTML file (div, h1, and button). The div element is just a wrapper for the rest of the elements.
  • The three button elements have “Start”, “Pause”, and “Stop” as innerText.
  • We have done some basic styling using CSS and added the link to our style.css stylesheet inside the head element.
  • We have also included our javascript file script.js with a script tag at the bottom.
<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <div class="timerInfo">
        <h1 id="hours">00</h1>
        <h1 id="minutes">00</h1>
        <h1 id="seconds">00</h1>
        <h1 id="secTenth">00</h1>

    <div class="buttons">
        <button id="start">Start</button>
        <button id="pause">Pause</button>
        <button id="stop">Stop</button>

    <script src="easyTimer.js"></script>
    <script src="script.js"></script>
.timerInfo, .buttons {
    display: flex;
    justify-content: center;

button {
    padding: 5px 10px;
    margin: 5px 10px;



  • We have selected all the button elements and h1 elements using document.querySelector() method and stored them in the startBtn, pauseBtn, stopBtn, hours, minutes, seconds, and secTenth variables respectively.
  • We have created an instance of EasyTimer JS and stored it in the timer variable.
  • We have attached the secondTenthsUpdated event to the timer.
  • In the event handler function, we are calling getTimeValues() method and storing the returned object in the obj variable.
  • We are extracting hours, minutes, seconds, etc. from the obj variable and displaying them in the h1 elements using the innerText property.
  • We have attached a click event listener to the start, pause, and stop buttons. In the event handler functions, we are starting, pausing, and stopping the timer.
let startBtn = document.querySelector('#start');
let pauseBtn = document.querySelector('#pause');
let stopBtn = document.querySelector('#stop');

let hours = document.querySelector('#hours');
let minutes = document.querySelector('#minutes');
let seconds = document.querySelector('#seconds');
let secTenth = document.querySelector('#secTenth');

var timer = new easytimer.Timer();

timer.addEventListener('secondTenthsUpdated', () => {
    const obj = timer.getTimeValues();

    hours.innerText = obj.hours.toString().padStart(2, '0');
    minutes.innerText = obj.minutes.toString().padStart(2, '0');
    seconds.innerText = obj.seconds.toString().padStart(2, '0');
    secTenth.innerText = obj.secondTenths.toString().padStart(2, '0');

startBtn.addEventListener('click', () => {
        precision: 'secondTenths'

pauseBtn.addEventListener('click', () => {

stopBtn.addEventListener('click', () => {