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




Subscribe to our YouTube Channel here


Subscribe

* indicates required
Subscribe to plus2net

    plus2net.com




    Post your comments , suggestion , error , requirements etc here .




    We use cookies to improve your browsing experience. . Learn more
    HTML MySQL PHP JavaScript ASP Photoshop Articles FORUM . Contact us
    ©2000-2023 plus2net.com All rights reserved worldwide Privacy Policy Disclaimer