JavaScript Stopwatch

JavaScript Stopwatch, 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

 

JavaScript stopwatch, html stopwatch

 

 

Download Source Code

Latest Updates

You May Also Like


PHP Projects

PHP Data Filter between Two Dates Project with Source Code

PHP Data Filter between Two Dates - You will learn how to filter or find data between two dates in PHP/MySQL in this project.....

PHP Projects

PHP CRUD Operation Project with Source Code

PHP CRUD Operation with MySQL & Bootstrap 5 (Create, Read, Update, Delete) - We will use INSERT, SELECT, UPDATE, and DELETE statements in MySQL, which equate to CRUD capability.....

JavaScript Projects

JavaScript Weight Converter Project with Source Code

JavaScript Weight Converter Download free with source code - Simple Weight Converter App using HTML & JavaScript that converts kilograms to other measurements.....

PHP Projects

PHP Multiple Image Upload Project with Source Code

Multiple Image Upload using PHP and MySQL download free with source code - 1. Create Database and Table. 2. Create HTML Form. 3. PHP Code for Upload an Image and PHP Code for Display an Image.....

PHP Projects

PHP Image Upload Project with Source Code

Image Upload using PHP and MYSQL download free project with source code - 1. Create Database and Table. 2. Create HTML Form. 3. PHP Code for Upload an Image and PHP Code for Display an Image.....