implement stopwatch in javascript code example
Example: 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>