Stylish Stop Clock in JS

A stopwatch is a useful tool for measuring the amount of time that has passed between two events. In this tutorial, we will create a simple stopwatch using JavaScript.

When using the JavaScript timing methods, you need to understand how JavaScript executes statements in time intervals.

First, we will create the basic HTML structure for our stopwatch. We will use a div element to display the elapsed time, and two buttons to start and stop the stopwatch.

Source Code

<!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">
  <title>Document</title>
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
  <div class="clock">
 
    <div class="brand">SONY</div>
    <div class="slogn">make.believe</div>
    <div class="frame"></div>
    <div class="display">
      <div class="hrs">0</div>
      <div class="hrs">0</div>
      <div class="colon">:</div>
      <div class="min">0</div>
      <div class="min">0</div>
      <div class="colon">:</div>
      <div class="sec">0</div>
      <div class="sec">0</div>
      <div class="colon">:</div>
      <div class="ms">0</div>
      <div class="ms">0</div>
    </div>
    <div class="buttons">

      <div class="group"> 
        <button class="start btn">Start</button>
        <button class="stop btn">Stop</button>
        <button class="reset btn">Reset</button>
      </div>
      <p>Stop&nbsp;<span>Wacth 4</span></p>
    </div>

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

This JavaScript code creates a stopwatch that can be started, stopped, and reset using three buttons. The code uses the querySelector() method to select the HTML elements for the buttons and the clock display.

When the start button is clicked, the start class is added to the start button, the stop class is removed from the stop button, and the start-animation class is added to the clock element. It also starts an interval that runs every 10 milliseconds and calls the updateDisplay() function. Inside this interval, it increments the ms, sec, min, and hrs variables, and calls the updateDisplay() function every time the ms variable reaches 100ms.

When the stop button is clicked, the start class is removed from the start button, the stop class is added to the stop button, and the start-animation class is removed from the clock element. It also clears the interval using clearInterval() function.

When the reset button is clicked, the start and stop classes are removed from the start and stop buttons, the start-animation class is removed from the clock element. It also clears the interval using clearInterval() function. The hrs, min, sec, and ms variables are reset to 0, and the updateDisplay() function is called.

The updateDisplay() function updates the display of the clock, using the innerText property to set the text content of the elements with the class hrs, min, sec, and ms. It also adds leading zeros to the display if the numbers are less than 10. The toString() method is used to convert the numbers to strings.

js/script.js

const btnStart=document.querySelector('.start');
const btnStop=document.querySelector('.stop');
const btnReset=document.querySelector('.reset');
const clock=document.querySelector('.clock');

let hrs=min=sec=ms=0,startTimer;


btnStart.addEventListener('click',()=>{
  btnStart.classList.add('start-active');
  btnStop.classList.remove('stop-active');
  clock.classList.add('start-animation');

  startTimer=setInterval(()=>{
    ms++;
    if(ms==100){
      sec++;
      ms=0;
    }
    if(sec==60){
      min++;
      sec=0;
    }
    if(min==60){
      hrs++;
      min=0;
    }
    updateDisplay();
  },10);
});


btnStop.addEventListener('click',()=>{
  btnStart.classList.remove('start-active');
  btnStop.classList.add('stop-active');
  clock.classList.remove('start-animation');
  clearInterval(startTimer);
});

btnReset.addEventListener('click',()=>{
  hrs=min=sec=ms=0;
  btnStart.classList.remove('start-active');
  btnStop.classList.remove('stop-active');
  clock.classList.remove('start-animation');
  clearInterval(startTimer);
  updateDisplay();
});

function updateDisplay(){

   //Formated Display
   phrs=hrs<10?'0'+hrs:hrs; 
   pmin=min<10?'0'+min:min;
   psec=sec<10?'0'+sec:sec;
   pms=ms<10?'0'+ms:ms; //25


   phrs=phrs.toString();
   pmin=pmin.toString();
   psec=psec.toString();
   pms=pms.toString(); // '25' pms[0]=2 pms[1]=5

   document.querySelectorAll('.hrs')[0].innerText=phrs[0];
   document.querySelectorAll('.hrs')[1].innerText=phrs[1];
   document.querySelectorAll('.min')[0].innerText=pmin[0];
   document.querySelectorAll('.min')[1].innerText=pmin[1];
   document.querySelectorAll('.sec')[0].innerText=psec[0];
   document.querySelectorAll('.sec')[1].innerText=psec[1];
   document.querySelectorAll('.ms')[0].innerText=pms[0];
   document.querySelectorAll('.ms')[1].innerText=pms[1];
   
}

css/style.css

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;700&display=swap');


*{
  margin: 0;
  padding:0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}

@font-face {
  font-family: digital-7;
  src: url('digital-7.ttf');
}

body{
  background-color: #dcdde1;
  height: 100vh;
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
  user-select: none;
}
.clock{
  background-color: #333;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  box-shadow:  inset 
  0 -2px 0 0 rgba(0,0,0,.8),
  1px 1px 0 0 rgba(0,0,0,.8),
  2px 2px 0 0 rgba(0,0,0,.8),
  3px 3px 0 0 rgba(0,0,0,.8),
  4px 4px 0 0 rgba(0,0,0,.8),
  5px 5px 0 0 rgba(0,0,0,.8),
  6px 6px 0 0 rgba(0,0,0,.8),
  7px 7px 0 0 rgba(0,0,0,.8),
  8px 8px 0 0 rgba(0,0,0,.8),
  9px 9px 0 0 rgba(0,0,0,.8),
  10px 10px 0 0 rgba(0,0,0,.8),
  11px 11px 0 0 rgba(0,0,0,.8),
  12px 12px 0 0 rgba(0,0,0,.8),
  13px 13px 0 0 rgba(0,0,0,.8),
  14px 14px 0 0 rgba(0,0,0,.8),
  15px 15px 0 0 rgba(0,0,0,.8),
  16px 16px 0 0 rgba(0,0,0,.8),
  17px 17px 0 0 rgba(0,0,0,.8),
  18px 18px 0 0 rgba(0,0,0,.8),
  19px 19px 0 0 rgba(0,0,0,.8),
  20px 20px 0 0 rgba(0,0,0,.8);
  position: relative;
}

.frame{
  background-color: #2f3640;
  width:380px;
  height:380px;
  border-radius: 50%;
  border: 1px solid #7f8fa6;
  position: absolute;
  top:50%;
  left: 50%;
  transform: translate(-50%,-50%);
  z-index: 1;
}

.brand{
  font-size: 35px;
  color:#bdc3c7;
  font-weight:500;
  position: absolute;
  top: 50px;
  left: 48%;
  transform: translateX(-48%);
  z-index: 4;
}
.slogn{
  font-size: 13px;
  font-weight:500;
  color:#95a5a6;
  position: absolute;
  top: 95px;
  left: 48%;
  transform: translateX(-48%);
  z-index: 4;
}
.display{
  color:white;
  font-size: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #2f3640;
  width: 80%;
  height: 80px;
  position: absolute;
  z-index: 10;
  top:150px;
  left: 40px;
  border-radius: 50px;
}
.display div{
  font-family: digital-7;
}


.hrs,
.min,
.sec,
.ms{
width: 30px;
text-align: center;
}


.colon{
  opacity: 0.2;
}
.clock.start-animation .colon{
  animation: blink 0.5s ease infinite;
}

@keyframes blink {
  from{
    opacity: 0.2;
  }
  to{
    opacity: 1;
  }
}

.buttons{
  position: absolute;
  z-index: 3;
  bottom: 20px;
  left: 20px;
  background-color: #7f8fa6;
  height: 200px;
  width: 90%;
  border-radius: 0 0 180px 180px ;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.buttons p{
  text-transform: uppercase;
  color:#2f3640;
  font-size:12px;
  font-weight: 600;
  letter-spacing: 1px;
  background-color: white;
  margin-top: 20px; padding-left: 10px;
}
.group{
  margin-top: 30px;
}

.buttons p span{
  background-color: #2f3640;
  color:white;
  padding-right: 10px;
  padding-left: 10px;
  display: inline-block;
}


.start{
  background-color: #44bd32;
}
.stop{
  background-color: #EA2027;
}
.reset{
  background-color: #8e44ad;
}

button{
  outline:0; 
  border:none;
  font-size: 18px;
  color:#fff;
  width: 90px;
  height: 60px;
  border-radius: 50%;
  box-shadow:inset 0 -2px 0 0 rgba(0,0,0,.2),
  1px 1px 0 0 rgba(0,0,0,.2),
  2px 2px 0 0 rgba(0,0,0,.2);
  transition:all .3s ease-out; 
}

button:active{
  color:rgb(228, 227, 227);
  box-shadow:inset 0 -4px 0 0 rgba(0,0,0,.2),
  1px 1px 0 0 rgba(0,0,0,.2),
  2px 2px 0 0 rgba(0,0,0,.2),
  3px 3px 0 0 rgba(0,0,0,.2),
  4px 4px 0 0 rgba(0,0,0,.2);
}

.start-active,
.stop-active{
  pointer-events: none;
  opacity: 0.5;
}

Output

Live Preview

With this simple JavaScript code, you now have a functional stopwatch. You can easily modify this code to add additional features, such as to pause and resume the stopwatch.