'************************************** ' Name: Stopwatch ' Description:It is simple basic stopwat ' ch code where simple coding is done in j ' avascript using javascript function and ' called on onclick event and for styling ' basic css is used. ' By: Divyank Sharma ' ' ' Inputs:None ' ' Returns:None ' 'Assumes:None ' 'Side Effects:None '************************************** <html> <head> <style> div.dd{max-height:4vw; min-height:3vw; max-width:30vw; border:5px double black; word-spacing:0px; background-color:lightgrey; border-radius:10px;} th#a3{border:2px solid black; font-size:33px; height:10%; width:5vw; border-radius:10px;} th#a1{font-size:2vw;} div#a4{ margin:30px;} div#d1,#d2,#d3{background-color:grey; width:5vw; font-size:2vw; height:10%; border-radius:10px;} </style> <script> var slot1 = 0; var slot2 = 0; var slot3 = 0; function first() { slot1++; document.getElementById("d1").innerHTML = slot1; setTimeout('first()',10); if(slot1==60) { slot1=0; } } function second() { slot2++; document.getElementById("d2").innerHTML = slot2; setTimeout('second()',100); if(slot2==60) { slot2=0; } } function third() { slot3++; document.getElementById("d3").innerHTML = slot3; setTimeout('third()',1000); } function restart() { slot1=-1; slot2=-1; slot3=-1; } </script> </head> <body onload="first(),second(),third()"> <center><div class="dd"> <table> <tr> <th id="a3"><div id="d1">0</div></th><th id="a1">:</th> <th id="a3"><div id="d2">0</div></th><th id="a1">:</th> <th id="a3"><div id="d3">0</div></th> <div id="d4"></div> </tr> <table> </div> <div id="a4"><input type="button" value="restart" onclick="restart()"></div> </center> </body> </html>