Create a simple Stopwatch using JavaScript with Pause & Stop button

RH Suman
June 20, 2022

39

In this article, I am going to show you how to make a simple JavaScript stopwatch. Creating a timer is a very simple task. We will only be using variables, functions and THAT'S IT! If you want to make Stopwatch using JavaScript, then follow the tutorial below.
Create a simple Stopwatch using JavaScript with Pause & Stop button

TML Code:

I'm using Bootstrap cdn For Basic CSS

<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet">
<!--  -->
<div class="container">
  <div class="card">
    <div class="card-body">
      <div class="timerDisplay">
            00 : 00 : 00 : 000
      </div>
      <div class="row justify-content-center">
        <div class="col-4">
<button type="button" class="btn btn-outline-primary m-auto" id="startTimer">Play</button>
        </div>
      <div class="col-4">
<button type="button" class="btn btn-outline-secondary m-auto" id="pauseTimer">Pause</button>
        </div>
      <div class="col-4">
<button type="button" class="btn btn-outline-danger" id="resetTimer">Reset</button>
        </div>
        </div>
    </div>
  </div>
</div>

CSS Code:

body{
  background-color: #f5f5f7;
}
.container{
/*   width: 500px !important; */
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.timerDisplay{
  position: relative;
  text-align: center;
  background: #ffffff;
  padding: 20px 0;
  font-size: 25px;
  font-family: 'Roboto mono',monospace;
}

JavaScript:

let [milliseconds,seconds,minutes,hours] = [0,0,0,0];
let timerRef = document.querySelector('.timerDisplay');
let int = null;

document.getElementById('startTimer').addEventListener('click', ()=>{
    if(int!==null){
        clearInterval(int);
    }
    int = setInterval(displayTimer,10);
});

document.getElementById('pauseTimer').addEventListener('click', ()=>{
    clearInterval(int);
});

document.getElementById('resetTimer').addEventListener('click', ()=>{
    clearInterval(int);
    [milliseconds,seconds,minutes,hours] = [0,0,0,0];
    timerRef.innerHTML = '00 : 00 : 00 : 000 ';
});

function displayTimer(){
    milliseconds+=10;
    if(milliseconds == 1000){
        milliseconds = 0;
        seconds++;
        if(seconds == 60){
            seconds = 0;
            minutes++;
            if(minutes == 60){
                minutes = 0;
                hours++;
            }
        }
    }
    let h = hours < 10 ? "0" + hours : hours;
    let m = minutes < 10 ? "0" + minutes : minutes;
    let s = seconds < 10 ? "0" + seconds : seconds;
    let ms = milliseconds < 10 ? "00" + milliseconds : milliseconds < 100 ? "0" + milliseconds : milliseconds;

    timerRef.innerHTML = ` ${h} : ${m} : ${s} : ${ms}`;
}

Preview:

Tags

HTML CSS JavaScript Stopwatch

Subscribe

Get Updates

Subscribe our newsletter to get the last update into your inbox!

Please insert email address.

Recommended Posts