<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>时钟&&秒表</title>
<script language="javascript">
<!------时钟------>
var time; //时钟的setTimeout控制变量
function showTime(){
var date = new Date();
var sec = date.getSeconds();
var minute=date.getMinutes();
var hour = date.getHours();
//var year = date.getFullYear();
var show = document.getElementById('time');
if(parseInt(sec)<10){
show.value = hour + "时" + minute + "分0" +sec +"秒";
}else{
show.value = hour + "时" + minute + "分" +sec +"秒";
}
time = setTimeout("showTime()",1000);
}
function doChange(){
var state = document.getElementById('control');
switch(state.value){
case "停表":
clearTimeout(time);
state.value = "走表"
break;
case "走表":
setTimeout("showTime()",1000);
state.value = "停表"
break;
}
}
<!------秒表------>
var isStop //控制秒表,暂停、开始
var ms =0; //毫秒
var sec=0; // 表
var minute = 0;//分钟
var hour = 0 ;小时
function alter(){
var btn = document.getElementById('ctrl');
switch(btn.value){
case "暂停":
clearTimeout(isStop);
btn.value = "开始";
break;
case '开始':
setTimeout("showStWatch()",10);
btn.value = "暂停";
break;
}
}
function showStWatch(){
ms++;
var show = document.getElementById('stWatch');
if(parseInt(ms) == 100){
sec++;
ms = 0;
}
if(parseInt(sec)==60){
minute++;
sec = 0;
}
if(parseInt(minute==60)){
hour++;
minute =0;
}
if(parseInt(ms)<10){
ms ="0"+ms
}
if(sec < 10 )show.value =hour+":"+minute+":0"+sec+":"+ms+"";
if(minute <10)show.value =hour+":0"+minute+":"+sec+":"+ms+"";
if(sec<10 && minute <10)show.value =hour+":0"+minute+":0"+sec+":"+ms+"";
else show.value =hour+":"+minute+":"+sec+":"+ms+"";
isStop = setTimeout("showStWatch()",10)
}
<!-- 重置秒表-->
function doInitialze(){
ms =0; //毫秒
sec=0; // 表
minute = 0;//分钟
hour = 0 ;//小时
document.getElementById('stWatch').value ="0:00:00:00";
}
</script>
</head>
<body onLoad="showTime(); doInitialze();">
<p>
时钟:
<input type="text" id="time" name="time" readonly="true"/>
<input type="button" id="control" name="control" value="停表" onClick="doChange()"/>
</p>秒表:
<input type="text" id="stWatch" name="stWatch" readonly="true"/>
<input type="button" id="ctrl" name="ctrl" value="开始" onClick="alter()"/> <input type="button" id="clear" name="clear" value="归零" onClick="doInitialze();"/>
<p>
</p>
</body>
</html>