How to Create Stopwatch using JavaScript, HTML and CSS

Share On

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

Try It

                    
                        <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

Try It

                    
                        
                        <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;
        }

Download Code Live Preview

How to Create Stopwatch using JavaScript, HTML and CSS

On page stopwatch

Stopwatch on popup

Leave a comment

Recent Posts

How to export database data into excel in csv format using PHP

Login and Registration System in PHP and MySQL with oops concept

how to make bootstrap modal draggable and resizable

Uploading Multiple Files with Progress Bar via Ajax and PHP