JavaScript Stopwatch

Demo Available Here

JavaScript Stopwatch Download with source code - Learn step-by-step process how to create a stopwatch using javascript.

 

HTMLCode

 

< p id="timer" style="font-size:50px;" >
        00:00:00
< /p >
< button onclick="startTime()">Start< /button >
< button onclick="stopTime()">Stop< /button >
< button onclick="resetTime()">Reset< /button >

 

Javascript Code

 

< script >
    const timer = document.getElementById('timer');

    var hr = 0;
    var min = 0;
    var sec = 0;
    var stoptime = true;

    function startTime() {
      if (stoptime == true) {
            stoptime = false;
            timerCycle();
        }
    }
    function stopTime() {
      if (stoptime == false) {
        stoptime = true;
      }
    }

    function timerCycle() {
        if (stoptime == false) {
        sec = parseInt(sec);
        min = parseInt(min);
        hr = parseInt(hr);

        sec = sec + 1;

        if (sec == 60) {
          min = min + 1;
          sec = 0;
        }
        if (min == 60) {
          hr = hr + 1;
          min = 0;
          sec = 0;
        }

        if (sec < 10 || sec == 0) {
          sec = '0' + sec;
        }
        if (min < 10 || min == 0) {
          min = '0' + min;
        }
        if (hr < 10 || hr == 0) {
          hr = '0' + hr;
        }

        timer.innerHTML = hr + ':' + min + ':' + sec;

        setTimeout("timerCycle()", 1000);
      }
    }

    function resetTime() {
        timer.innerHTML = '00:00:00';
        stoptime = true;
        hr = 0;
        sec = 0;
        min = 0;
    }
< /script >

 

Output

 

 

 

Download Source Code