adding a stopwatch in js code example

Example 1: 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 2: 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