1
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>
3
<!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.setSpanId=function(id){
spanId=id;
}
this.begin=function(t){
startTime=t;
handler=setInterval(this.showElapsed,500);
}
this.showElapsed=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");
function start(){
timer.begin(new Date());
}
function stop(){
timer.end();
}
//-->
</script>