How to Create Stopwatch using JavaScript, HTML and CSS

Updated on ... 08th January 2024

In this tutorial, we will explore the step-by-step process of building a sophisticated Stopwatch using HTML, CSS, and JavaScript. You will discover a user-friendly Stopwatch with two different examples Start, Stop, and Reset features.

We will see two different examples in this tutorial.

on page stopwatch
Stopwatch on popup

On page stopwatch


                                                                

                                                                

                                                                <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" />

                                                                <div class="stopwatch_outer" id="stopwatch_outer">
    <div class="stopwatch">
      <div id="display">00:00:00</div>
      <button class="btn c_btn_success" id="startButton" onclick="startStopwatch()">Start</button>
      <button class="btn c_btn_warning" id="stopButton" onclick="stopStopwatch()">Stop</button>
      <button class="btn c_btn_primary" id="resetButton" onclick="resetStopwatch()">Reset</button>
    </div>

    <div class="stop_watch_close" onclick="close_stop_watch()"><i class="fa-solid fa-xmark"></i></div>
  </div>



  <div style="text-align: center; margin-top: 130px;">
    <button class="btn c_btn_primary" onclick="open_stop_watch()">Click To Open Timer</button>
    <br>
    <br>
    <a href="index2.html">Click to view on page timer</a>
  </div>


                                                                

                                                                

                                                                * {
      margin: 0px;
      padding: 0px;
      box-sizing: border-box;
    }

    /* stopwatch start */
    .stopwatch_outer {
      display: none;
      padding: 15px 10px;
    }

    .stopwatch_outer.fixed {
      display: block;
      position: fixed;
      top: 0px;
      left: 0px;
      width: 100%;
      /* height: 100px; */
      background: #ededed;
      z-index: 9999;
    }

    .stopwatch_outer .stopwatch {
      text-align: center;
      margin: 0px;
    }

    .stop_watch_close {
      position: absolute;
      left: 50%;
      bottom: -18px;
      transform: translate(-50%, 0);
      background: white;
      width: 30px;
      height: 30px;
      text-align: center;
      line-height: 30px;
      border-radius: 50%;
      box-shadow: 0 0 8px rgba(0, 0, 0, .3);
      color: red;
      cursor: pointer;
      transition: all .3s;
    }

    .stop_watch_close:hover {
      bottom: -15px;
      background: red;
      color: #fff;
    }


    .stopwatch_outer #display {
      font-size: 34px;
      /* margin-bottom: 10px; */
      padding: 10px;
      display: inline-block;
      vertical-align: middle;
      font-weight: 600;
    }

    .stopwatch_outer button {
      margin: 5px;
      padding: 5px 10px;
      cursor: pointer;
    }


    .btn {
      display: inline-block;
      font-weight: 400;
      color: #212529;
      text-align: center;
      vertical-align: middle;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
      background-color: transparent;
      border: 1px solid transparent;
      padding: .375rem .75rem;
      font-size: 1rem;
      line-height: 1.5;
      border-radius: .25rem;
      transition: all .3s;
      cursor: pointer;
    }

    .btn.disabled,
    .btn:disabled {
      cursor: not-allowed;
    }


    .c_btn_success {
      color: #fff;
      background-color: #28a745;
      border-color: #28a745;
      box-shadow: none;
    }

    .c_btn_success:hover {
      color: #fff;
      background-color: #218838;
      border-color: #1e7e34;
    }

    .c_btn_warning {
      color: #1f2d3d;
      background-color: #ffc107;
      border-color: #ffc107;
      box-shadow: none;
    }

    .c_btn_warning:hover {
      color: #1f2d3d;
      background-color: #e0a800;
      border-color: #d39e00;
    }

    .c_btn_primary {
      color: #fff;
      background-color: #007bff;
      border-color: #007bff;
      box-shadow: none;
    }

    .c_btn_primary:hover {
      color: #fff;
      background-color: #0069d9;
      border-color: #0062cc;
    }


                                                                

                                                                   let timer;
    let hours = 0;
    let minutes = 0;
    let seconds = 0;

    function startStopwatch() {
      timer = setInterval(displayStopwatch, 1000);
      document.getElementById('startButton').disabled = true;
    }

    function displayStopwatch() {
      seconds++;
      if (seconds >= 60) {
        seconds = 0;
        minutes++;
        if (minutes >= 60) {
          minutes = 0;
          hours++;
        }
      }

      const formattedTime = pad(hours) + ':' + pad(minutes) + ':' + pad(seconds);
      document.getElementById('display').innerText = formattedTime;
    }

    function stopStopwatch() {
      clearInterval(timer);
      document.getElementById('startButton').disabled = false;
    }

    function resetStopwatch() {
      clearInterval(timer);
      document.getElementById('display').innerText = '00:00:00';
      hours = 0;
      minutes = 0;
      seconds = 0;
      document.getElementById('startButton').disabled = false;
    }

    function pad(value) {
      return value < 10 ? '0' + value : value;
    }


    let watch_open = true;
    function open_stop_watch() {
      if (watch_open) {
        document.getElementById("stopwatch_outer").classList.add('fixed');
        watch_open = false;
      }
      else {
        document.getElementById("stopwatch_outer").classList.remove('fixed');
        resetStopwatch();
        watch_open = true;
      }
    }

    function close_stop_watch() {
      document.getElementById("stopwatch_outer").classList.remove('fixed');
      resetStopwatch();
    }

How to Create Stopwatch using JavaScript, HTML and CSS

Stopwatch on popup


                                                                

                                                                

                                                                

                                                                <div class="stopwatch_outer" id="stopwatch_outer">
        <div class="stopwatch">
            <div id="display">00:00:00</div>
            <button class="btn c_btn_success" id="startButton" onclick="startStopwatch()">Start</button>
            <button class="btn c_btn_warning" id="stopButton" onclick="stopStopwatch()">Stop</button>
            <button class="btn c_btn_primary" id="resetButton" onclick="resetStopwatch()">Reset</button>
        </div>

        <div>
            <br>
            <a href="index.html">Click to view popup timer</a>
        </div>
    </div>


                                                                

                                                                

                                                                * {
            margin: 0px;
            padding: 0px;
            box-sizing: border-box;
        }

        .stopwatch_outer {
            display: block;
            width: 100%;
            height: 100vh;

            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
        }

        .stopwatch_outer .stopwatch {
            text-align: center;
            margin: 0px;
            background: #ededed;
            box-shadow: inset 0 0 5px rgba(0, 0, 0, .2);
        }


        .stopwatch_outer #display {
            font-size: 34px;
            /* margin-bottom: 10px; */
            padding: 10px;
            display: inline-block;
            vertical-align: middle;
            font-weight: 600;
        }

        .stopwatch_outer button {
            margin: 5px;
            padding: 5px 10px;
            cursor: pointer;
        }



        .btn {
            display: inline-block;
            font-weight: 400;
            color: #212529;
            text-align: center;
            vertical-align: middle;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
            background-color: transparent;
            border: 1px solid transparent;
            padding: .375rem .75rem;
            font-size: 1rem;
            line-height: 1.5;
            border-radius: .25rem;
            transition: all .3s;
            cursor: pointer;
        }

        .btn.disabled,
        .btn:disabled {
            cursor: not-allowed;
        }


        .c_btn_success {
            color: #fff;
            background-color: #28a745;
            border-color: #28a745;
            box-shadow: none;
        }

        .c_btn_success:hover {
            color: #fff;
            background-color: #218838;
            border-color: #1e7e34;
        }

        .c_btn_warning {
            color: #1f2d3d;
            background-color: #ffc107;
            border-color: #ffc107;
            box-shadow: none;
        }

        .c_btn_warning:hover {
            color: #1f2d3d;
            background-color: #e0a800;
            border-color: #d39e00;
        }

        .c_btn_primary {
            color: #fff;
            background-color: #007bff;
            border-color: #007bff;
            box-shadow: none;
        }

        .c_btn_primary:hover {
            color: #fff;
            background-color: #0069d9;
            border-color: #0062cc;
        }


                                                                

                                                                   let timer;
        let hours = 0;
        let minutes = 0;
        let seconds = 0;

        function startStopwatch() {
            timer = setInterval(displayStopwatch, 1000);
            document.getElementById('startButton').disabled = true;
        }

        function displayStopwatch() {
            seconds++;
            if (seconds >= 60) {
                seconds = 0;
                minutes++;
                if (minutes >= 60) {
                    minutes = 0;
                    hours++;
                }
            }

            const formattedTime = pad(hours) + ':' + pad(minutes) + ':' + pad(seconds);
            document.getElementById('display').innerText = formattedTime;
        }

        function stopStopwatch() {
            clearInterval(timer);
            document.getElementById('startButton').disabled = false;
        }

        function resetStopwatch() {
            clearInterval(timer);
            document.getElementById('display').innerText = '00:00:00';
            hours = 0;
            minutes = 0;
            seconds = 0;
            document.getElementById('startButton').disabled = false;
        }

        function pad(value) {
            return value < 10 ? '0' + value : value;
        }