June 19, 2021

How to Create Stopwatch in Javascript

By Krishnaa JavaScript Questions 0 Comments

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.

HTML & CSS

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>

<head>

<title>Document</title>

</head>

<body>

</div>

<button id="start">Start</button>

<button id="pause">Pause</button>

</div>

</body>

</html>

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="timerInfo"> <h1 id="hours">00</h1> <h1 id="minutes">00</h1> <h1 id="seconds">00</h1> <h1 id="secTenth">00</h1> </div> <div class="buttons"> <button id="start">Start</button> <button id="pause">Pause</button> <button id="stop">Stop</button> </div> <script src="easyTimer.js"></script> <script src="script.js"></script> </body> </html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    
    <div class="timerInfo">
        <h1 id="hours">00</h1>
        <h1 id="minutes">00</h1>
        <h1 id="seconds">00</h1>
        <h1 id="secTenth">00</h1>
    </div>

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

    <script src="easyTimer.js"></script>
    <script src="script.js"></script>
</body>
</html>

.timerInfo, .buttons {

display: flex;

justify-content: center;

}

button {

padding: 5px 10px;

margin: 5px 10px;

}

h1+h1::before{

content:':'

}

.timerInfo, .buttons { display: flex; justify-content: center; } button { padding: 5px 10px; margin: 5px 10px; } h1+h1::before{ content:':' }

.timerInfo, .buttons {
    display: flex;
    justify-content: center;
}

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

h1+h1::before{
    content:':'
}

Javascript

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', () => {

timer.start({

precision: 'secondTenths'

})

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

timer.pause();

})

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

timer.stop();

})

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', () => {
    timer.start({
        precision: 'secondTenths'
    })
})

pauseBtn.addEventListener('click', () => {
    timer.pause();
})

stopBtn.addEventListener('click', () => {
    timer.stop();
})

You May Also Like: