How to make a javaScript stopwatch

Learn how to create a JavaScript stopwatch with an example, from setting up a timer to displaying results.

Creating a JavaScript Stopwatch

A stopwatch is a great way to track the time of certain events, or simply to measure the amount of time that has elapsed. In this tutorial, we'll be creating a stopwatch using JavaScript. We'll use the setInterval() method to update a timer displayed on the page, while also keeping track of the total time elapsed.

Step 1: Setting Up the HTML

First, let's set up the HTML for our stopwatch. We'll need a container element to hold the timer, a button to start and stop the stopwatch, and a button to reset it. Here's the HTML we'll be using:


<div class="container">
  <div class="timer">00:00:00</div>
  <button class="start">Start</button>
  <button class="stop">Stop</button>
  <button class="reset">Reset</button>
</div>

Step 2: Setting Up the JavaScript

Next, let's set up the JavaScript for our stopwatch. We'll need to create some variables to keep track of the time, and we'll need to define our functions for starting, stopping, and resetting the timer.


// Set up our variables
let seconds = 0;
let minutes = 0;
let hours = 0;
let timer;

// Create functions to start, stop, and reset the timer
function startTimer() {
  timer = setInterval(runTimer, 1000);
}

function stopTimer() {
  clearInterval(timer);
}

function resetTimer() {
  clearInterval(timer);
  seconds = 0;
  minutes = 0;
  hours = 0;
  document.querySelector('.timer').innerHTML = '00:00:00';
}

Step 3: Incrementing the Timer

Now that we have our variables and functions set up, we can create a function to increment the timer. This function will be called every second, and it will update the timer display and increment the hours, minutes, and seconds variables.


// Increment the timer
function runTimer() {
  seconds++;
  if (seconds >= 60) {
    seconds = 0;
    minutes++;
    if (minutes >= 60) {
      minutes = 0;
      hours++;
    }
  }

  // Format the timer display
  document.querySelector('.timer').innerHTML = 
    (hours ? (hours > 9 ? hours : "0" + hours) : "00") + ":" + 
    (minutes ? (minutes > 9 ? minutes : "0" + minutes) : "00") + ":" + 
    (seconds > 9 ? seconds : "0" + seconds);
}

Step 4: Adding Event Listeners

Finally, we need to add event listeners to our buttons so that our functions are called when they are clicked. We'll add an event listener to our start button that calls the startTimer() function, an event listener to our stop button that calls the stopTimer() function, and an event listener to our reset button that calls the resetTimer() function.


// Add event listeners to our buttons
document.querySelector('.start').addEventListener('click', startTimer);
document.querySelector('.stop').addEventListener('click', stopTimer);
document.querySelector('.reset').addEventListener('click', resetTimer);

And that's it! We now have a fully functional JavaScript stopwatch. Try it out and see how it works.

javascript