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



Count down script Realtime Clock using JavaScript

Window Object Bookmark a page Redirect Page
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-2024 plus2net.com All rights reserved worldwide Privacy Policy Disclaimer