Time Events in JavaScript with example – Create Stopwatch

In this tutorial, we will learn how to create a digital stopwatch in JavaScript using time events.

What are time events in JavaScript

Timing events allow you to execute a particular piece of code at a specific time interval. These events are available in the browser.

There are some time event methods/functions provided by the window.

setTimeout()

This method is used to execute a code after some amount of time.

var timeout = window.setTimeout(function,delay);

Here, the function contains logic code or where you will show time change.

Delay gives the time delay to the function call which is written in milliseconds, i.e. 1000 means 1 sec.

This method returns an ‘id’.

setInterval()

This method is used to execute a code repeatedly with a fixed amount of time interval.

var intervalId =  window.setInterval(function,delay);

The use of each parameter is the same as the above method.

clearTimeout()

It is used to cancel timeout set by the ‘setTimeout()’ method.

window.clearTimeout(timeoutID);

Parameter contains ID which is return by setTimeout().

If you don’t want to use clearTimeout () then not required to store id return by setTimeout().

clearInterval()

It is used to cancel the repeating timed action provided by using ‘setInterval()’.

window.clearInterval(intervalID);

The ‘intervalID’ is returned by setInterval().

A mini project based on the above concept.

Stopwatch in JavaScript

Index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <script type="text/javascript" src="javascript.js"></script>
    <title>Stop Watch</title>
</head>
<body>
    <div id="timer">00:00:00</div>
<div class="button">
<button id="start" onclick="start()">Start</button>
<button id="reset" onclick="reset()">Reset</button>

</div>
</body>
</html>

style.css

body{
    background:yellow;
  }
  #timer{
    font-size:50px;
    text-align:center;
    margin-top:100px;
  }
  #start,#reset{
    background-color:white;
    border: 2px solid blue;
    width:100px;
    height:30px;
    margin:5px;
    border-radius:10px;
    font-weight:bold;
     text-align:center;
  }
  .button{
    text-align:center;
    margin:10px;
  }
  #start:hover,#reset:hover{
   cursor: pointer;
  }

javascript.js

var hour=0,sec=0,min=0;
var dispHour=0,dispMin=0,dispSec=0;
var timeoutId=null;
var check="stop";

function timer(){
  sec++;
  if(sec/60==1){
    min++;
    sec=0;
  if(min/60==1){
    hour++;
    min=0;
  }}
    if(sec<10){ dispSec="0"+sec.toString(); }
    else{ dispSec=sec.toString(); }
   if(min<10){ dispMin="0"+min.toString(); }
   else{ dispMin=min.toString(); }
   if(hour<10){ dispHour="0"+hour.toString(); }
   else{ dispHour=hour.toString(); }
  document.getElementById("timer").innerHTML=dispHour+":"+dispMin+":"+dispSec;
}

function start(){
    if(check==="stop"){
        timeoutId=window.setInterval(timer,1000);
        document.getElementById("start").innerHTML="Stop"; 
        check="start";
    }else{
    window.clearInterval(timeoutId);
    document.getElementById("start").innerHTML="Start";
    check="stop";
}}

function reset(){
    window.clearInterval(timeoutId);
    sec=0,min=0,hour=0;
    document.getElementById("timer").innerHTML="00:00:00";
    document.getElementById("start").innerHTML="Start";
}

If you want to check the demo then click on output.

stopwatch in JavaScript

Also read: Countdown Timer Project in JavaScript

Leave a Reply

Your email address will not be published. Required fields are marked *