Vanilla JavaScript Stop Watch with Milliseconds

Vanilla JavaScript Stop Watch with Milliseconds
Code Snippet:JavaScript Stopwatch
Author: Cathy Dutton
Published: January 10, 2024
Last Updated: January 22, 2024
Downloads: 2,353
License: MIT
Edit Code online: View on CodePen
Read More

This Vanilla JavaScript code snippet helps you to create a stop watch with realtime updating seconds and milliseconds. It comes with three buttons to start, stop and reset the stop watch. The code is based on a simple idea to converts milliseconds to seconds using a timer function.

How to Create Vanilla JavaScript Stop Watch with Milliseconds

1. First of all, create a span element with an id “seconds” and another span element with id “tens” that will display the milliseconds. Similarly, create three buttons with unique IDs for start, stop, and reset the stop watch. Wrap all these elements into a wrapper as follows:

<div class="wrapper">
<h1>Stopwatch</h1>
<h2>Vanilla JavaScript Stopwatch</h2>
<p><span id="seconds">00</span>:<span id="tens">00</span></p>
<button id="button-start">Start</button>
<button id="button-stop">Stop</button>
<button id="button-reset">Reset</button>
</div> 

2. After that, style the stop watch using the following CSS. You can set the custom background, font size, and color in order to customize the overall look.

/* Variabes */
/* Mixin's */
body {
  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  height: 100%;
}

.wrapper {
  width: 800px;
  margin: 30px auto;
  color: #414141;
  text-align: center;
}

h1, h2, h3 {
  font-family: "Roboto", sans-serif;
  font-weight: 100;
  font-size: 2.6em;
  text-transform: uppercase;
}

#seconds, #tens {
  font-size: 2em;
}

button {
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  -khtml-border-radius: 5px;
  background: #ffa600;
  color: #fff;
  border: solid 1px #fff;
  text-decoration: none;
  cursor: pointer;
  font-size: 1.2em;
  padding: 18px 10px;
  width: 180px;
  margin: 10px;
  outline: none;
}
button:hover {
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
  background: #fff;
  border: solid 1px #fff;
  color: #ffa600;
}

3. In the final step, add the following JavaScript function between the <script> and </script> tag before closing the body tag and done.

window.onload = function () {
  
  var seconds = 00; 
  var tens = 00; 
  var appendTens = document.getElementById("tens")
  var appendSeconds = document.getElementById("seconds")
  var buttonStart = document.getElementById('button-start');
  var buttonStop = document.getElementById('button-stop');
  var buttonReset = document.getElementById('button-reset');
  var Interval ;

  buttonStart.onclick = function() {
    
    clearInterval(Interval);
     Interval = setInterval(startTimer, 10);
  }
  
    buttonStop.onclick = function() {
       clearInterval(Interval);
  }
  

  buttonReset.onclick = function() {
     clearInterval(Interval);
    tens = "00";
  	seconds = "00";
    appendTens.innerHTML = tens;
  	appendSeconds.innerHTML = seconds;
  }
  
   
  
  function startTimer () {
    tens++; 
    
    if(tens <= 9){
      appendTens.innerHTML = "0" + tens;
    }
    
    if (tens > 9){
      appendTens.innerHTML = tens;
      
    } 
    
    if (tens > 99) {
      console.log("seconds");
      seconds++;
      appendSeconds.innerHTML = "0" + seconds;
      tens = 0;
      appendTens.innerHTML = "0" + 0;
    }
    
    if (seconds > 9){
      appendSeconds.innerHTML = seconds;
    }
  
  }
  

}

That’s all! hopefully, you have successfully created JavaScript stop watch with milliseconds. If you have any questions or suggestions, feel free to comment below.

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

About CodeHim

Free Web Design Code & Scripts - CodeHim is one of the BEST developer websites that provide web designers and developers with a simple way to preview and download a variety of free code & scripts. All codes published on CodeHim are open source, distributed under OSD-compliant license which grants all the rights to use, study, change and share the software in modified and unmodified form. Before publishing, we test and review each code snippet to avoid errors, but we cannot warrant the full correctness of all content. All trademarks, trade names, logos, and icons are the property of their respective owners... find out more...

Please Rel0ad/PressF5 this page if you can't click the download/preview link

X