Stopwatch script

We can display a stop watch showing hour, minutes and seconds. This incremental clock can be started by clicking of a button. It can be stopped or reset to zero by clicking the same button again. Here is the source code
<input type="button" name="btn" id='btn' value="Start" onclick="to_start()";>
<br><br>
<div id=n1 style="z-index: 2; position: relative; right: 0px; top: 10px; background-color: #00cc33;
 width: 100px; padding: 10px; color: white; font-size:20px; border: #0000cc 2px dashed; "> </div>


<script language=javascript>
var h=0;
var m=0;
var s=0;
function to_start(){

switch(document.getElementById('btn').value)
{
case  'Stop':
window.clearInterval(tm); // stop the timer 
document.getElementById('btn').value='Start';
break;
case  'Start':
tm=window.setInterval('disp()',1000);
document.getElementById('btn').value='Stop';
break;
}
}


function disp(){
// Format the output by adding 0 if it is single digit //
if(s<10){var s1='0' + s;}
else{var s1=s;}
if(m<10){var m1='0' + m;}
else{var m1=m;}
if(h<10){var h1='0' + h;}
else{var h1=h;}
// Display the output //
str= h1 + ':' + m1 +':' + s1 ;
document.getElementById('n1').innerHTML=str;
// Calculate the stop watch // 
if(s<59){ 
s=s+1;
}else{
s=0;
m=m+1;
if(m==60){
m=0;
h=h+1;
} // end if  m ==60
}// end if else s < 59
// end of calculation for next display

}
</script>
Stopwatch with Analog Clock with start , stop and reset buttons drawn on HTML Canvas.

Analog Clock as Stopwatch with start stop and reset functions in html canvas



Visitors Rating
Your Rating





Post Comment This is for short comments only. Use the forum for more discussions.




HTML MySQL PHP JavaScript ASP Photoshop Articles FORUM . Contact us
©2000-2019 plus2net.com All rights reserved worldwide Privacy Policy Disclaimer