<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>计时器</title>
<script type="text/javascript">
var t=0;
var t1;
//定义$函数获取id
function $(id){
return document.getElementById(id);
}
//开始计时
function timeStart(){
hour = parseInt(t / 3600);// 时
min = parseInt(t / 60);// 分
if(min>=60){
min = min % 60;
}
lastsecs = t % 60; //秒
if(lastsecs<10){lastsecs = '0' + lastsecs;}
if(min<10){min = '0' + min;}
if(hour<10){hour = '0' + hour;}
//在输入框显示计时
$('txt').value = hour + ":" + min + ":" + lastsecs;
t = t + 1;
t1 = setTimeout('timeStart()',1000)
$('start').style.display = "none";
$('stop').style.display = "";
}
//停止计时
function timeStop(){
clearTimeout(t1)
$('start').style.display = "";
$('stop').style.display = "none";
}
//清除
function clearAll(){
t=0;
$('txt').value= "00:" + "00:" + "00";
clearTimeout(t1);
$('start').style.display ="";
$('stop').style.display = "none";
}
</script>
</head>
<body>
<p>点击“开始计时”按钮启动计时器开始进行计时，从 0 开始,点击“停止计时”按钮停止计时。</p>
<form>
<input type="text" id="txt" value="00:00:00" />
<input type="button" value="开始计时" id="start" onClick="timeStart()" />
<input type="button" value="停止计时" style="display:none" id="stop" onClick="timeStop()" />
<input type="button" value="清除" onClick="clearAll()" />
</form>
</body>
</html>