1.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>计时器</title> <style type="text/css"> </style> </head> <body> <table border=1> <tr> <td width="100px"><button onclick="javascript:start();">start</button></td> <td width="100px"><button onclick="javascript:stop();">stop</button></td> <td width="100px"><span id="showtime"></span></td> </tr> </table> </body> </html> <script type="text/javascript"> <!-- function Timer(){ var spanId; var handler; var count; this.setSpanId=function(id){ spanId=id; count=0; } this.begin=function(){ handler=setInterval(this.add,500); } this.add=function(){ count++; document.getElementById(spanId).innerText=count+""; } this.end=function(){ clearInterval(handler); } } var timer=new Timer(); timer.setSpanId("showtime"); function start(){ timer.begin(); } function stop(){ timer.end(); } //--> </script>
2.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>计时器</title> <style type="text/css"> </style> </head> <body> <table border=1> <tr> <td width="100px"><button onclick="javascript:start();">start</button></td> <td width="100px"><button onclick="javascript:stop();">stop</button></td> <td width="100px"><span id="showtime"></span></td> </tr> </table> </body> </html> <script type="text/javascript"> <!-- function Timer(){ var spanId; var handler; var startTime; this.setStartTime=function(t){ startTime=t; } this.setSpanId=function(id){ spanId=id; } this.begin=function(){ handler=setInterval(this.add,500); } this.add=function(){ var now=new Date(); var diff=(now-startTime)/1000; var d=parseInt(diff/86400); var h=parseInt(diff/3600)-24*d; var m=parseInt((diff % 3600) / 60); var s=parseInt(diff % 60); var elapsed=d+"day "+h+"hour "+m+"minute "+s+"second"; document.getElementById(spanId).innerText=elapsed; } this.end=function(){ clearInterval(handler); } } var timer=new Timer(); timer.setSpanId("showtime"); timer.setStartTime(new Date()); function start(){ timer.begin(); } function stop(){ timer.end(); } //--> </script>
END