how to create a stopwatch in javascript code example

Example 1: stopwatch with javascript

var x;
var startstop = 0;

function startStop() { /* Toggle StartStop */

  startstop = startstop + 1;

  if (startstop === 1) {
    start();
    document.getElementById("start").innerHTML = "Stop";
  } else if (startstop === 2) {
    document.getElementById("start").innerHTML = "Start";
    startstop = 0;
    stop();
  }

}


function start() {
  x = setInterval(timer, 10);
} /* Start */

function stop() {
  clearInterval(x);
} /* Stop */

var milisec = 0;
var sec = 0; /* holds incrementing value */
var min = 0;
var hour = 0;

/* Contains and outputs returned value of  function checkTime */

var miliSecOut = 0;
var secOut = 0;
var minOut = 0;
var hourOut = 0;

/* Output variable End */


function timer() {
  /* Main Timer */


  miliSecOut = checkTime(milisec);
  secOut = checkTime(sec);
  minOut = checkTime(min);
  hourOut = checkTime(hour);

  milisec = ++milisec;

  if (milisec === 100) {
    milisec = 0;
    sec = ++sec;
  }

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

  if (min == 60) {
    min = 0;
    hour = ++hour;

  }


  document.getElementById("milisec").innerHTML = miliSecOut;
  document.getElementById("sec").innerHTML = secOut;
  document.getElementById("min").innerHTML = minOut;
  document.getElementById("hour").innerHTML = hourOut;

}


/* Adds 0 when value is <10 */


function checkTime(i) {
  if (i < 10) {
    i = "0" + i;
  }
  return i;
}

function reset() {


  /*Reset*/

  milisec = 0;
  sec = 0;
  min = 0
  hour = 0;

  document.getElementById("milisec").innerHTML = "00";
  document.getElementById("sec").innerHTML = "00";
  document.getElementById("min").innerHTML = "00";
  document.getElementById("hour").innerHTML = "00";

}

Example 2: how to make a stopwatch using js

//create a function to stop the time function stopTime( ) { 
/* check if seconds, minutes and hours are not equal to 0 */ 
<!DOCTYPE html> 
<html lang="en"> 
<head> 
<title> JavaScript Stop Watch </title> 
<style text="text/css"> 
  #stopWatch { width: 280px; 
height: auto; 
text-align: center; 
display: block; 
padding: 5px; 
margin: 0 auto; } 
#timer, #fulltime { width: auto; 
height: auto; 
padding: 10px;
font-weight: bold; 
font-family: tahoma; 
display: block;
border: 1px solid #eee; 
text-align: center; 
box-shadow: 0 0 5px #ccc; 
background: #fbfbf0; 
color: darkblue; 
border-bottom:4px solid darkgrey; }
button { cursor: pointer; font-weight: 700; } 
#fulltime { display:none; font-size:16px; font-weight:bold; } 
</style> 
<script type="text/javascript"> 
</script> 
</head> 
<body> 
<section id="stopWatch"> 
<p id="timer"> Time : 00:00:00 </p> 
<button id="start"> Start </button> 
<button id="stop"> Stop </button> 
<p id="fulltime"> </p> 
</section> 
<script>
  if ( seconds !== 0 || minutes !== 0 || hours !== 0 ) { 
  /* display the full time before reseting the stop watch */ 
  var fulltime = document .getElementById( "fulltime" );
  //display the full time fulltime.style.display = "block";
  var time = gethours + mins + secs; 
  fulltime.innerHTML = 'Fulltime: ' + time; 
  // reset the stop watch seconds = 0; minutes = 0; hours = 0; secs = '0' + seconds; mins = '0' + minutes + ': '; gethours = '0' + hours + ': '; /* display the stopwatch after it's been stopped */ var x = document.getElementById ("timer"); var stopTime = gethours + mins + secs; x.innerHTML = stopTime; /* display all stop watch control buttons */ var showStart = document.getElementById ('start'); showStart.style.display = "inline-block"; var showStop = document.getElementById ("stop"); showStop.style.display = "inline-block"; /* clear the stop watch using the setTimeout( ) return value 'clearTime' as ID */ clearTimeout( clearTime ); } // if () } // stopTime() /* you need to call the stopTime( ) function to terminate the stop watch */ window.addEventListener( 'load', function ( ) { var stop = document.getElementById ("stop"); stop.addEventListener( 'click', stopTime ); }); // stopwatch.js end 
</script>    
</body> 
</html>

Example 3: stopwatch with javascript

<h1>
  <span id="hour">00</span> :
  <span id="min">00</span> :
  <span id="sec">00</span> :
  <span id="milisec">00</span>
</h1>

<button onclick="startStop()" id="start">Start</button>
<button onclick="reset()">Reset</button>

Tags:

Javascript Example

Recent Posts