JavaScript 计时/时钟
简单的计时
<html>
<head>
<script type="text/javascript">
function timedMsg()
{
var t=setTimeout("alert('5 秒！')",5000)
}
</script>
</head>
<body>
<form>
<input type="button" value="显示定时的警告框" onClick = "timedMsg()">
</form>
<p>请点击上面的按钮。警告框会在 5 秒后显示。</p>
</body>
</html>
另一个简单的计时
<html>
<head>
<script type="text/javascript">
function timedText()
{
var t1=setTimeout("document.getElementById('txt').value='2 秒'",2000)
var t2=setTimeout("document.getElementById('txt').value='4 秒'",4000)
var t3=setTimeout("document.getElementById('txt').value='6 秒'",6000)
}
</script>
</head>
<body>
<form>
<input type="button" value="显示计时的文本" onClick="timedText()">
<input type="text" id="txt">
</form>
<p>点击上面的按钮。输入框会显示出已经逝去的时间（2、4、6 秒）。</p>
</body>
</html>
在一个无穷循环中的计时事件
<html>
<head>
<script type="text/javascript">
var c=0
var t
function timedCount()
{
document.getElementById('txt').value=c
c=c+1
t=setTimeout("timedCount()",1000)
}
</script>
</head>
<body>
<form>
<input type="button" value="开始计时！" onClick="timedCount()">
<input type="text" id="txt">
</form>
<p>请点击上面的按钮。输入框会从 0 开始一直进行计时。</p>
</body>
</html>
带有停止按钮的无穷循环中的计时事件
1 <html>
2 <head>
3 <script type="text/javascript">
4 var c=0
5 var t
6 function timedCount()
7 {
8 document.getElementById('txt').value=c
9 c=c+1
10 t=setTimeout("timedCount()",1000)
11 }
12
13 function stopCount()
14 {
15 clearTimeout(t)
16 }
17 </script>
18 </head>
19
20 <body>
21
22 <form>
23 <input type="button" value="开始计时！" onClick="timedCount()">
24 <input type="text" id="txt">
25 <input type="button" value="停止计时！" onClick="stopCount()">
26 </form>
27
28 <p>请点击上面的“开始计时”按钮来启动计时器。输入框会一直进行计时，从 0 开始。点击“停止计时”按钮可以终止计时。</p>
29
30 </body>
31
32 </html>
使用计时事件制作的钟表
1 <html>
2 <head>
3 <script type="text/javascript">
4 function startTime()
5 {
6 var today=new Date()
7 var h=today.getHours()
8 var m=today.getMinutes()
9 var s=today.getSeconds()
10 // add a zero in front of numbers<10
11 m=checkTime(m)
12 s=checkTime(s)
13 document.getElementById('txt').innerHTML=h+":"+m+":"+s
14 t=setTimeout('startTime()',500)
15 }
16
17 function checkTime(i)
18 {
19 if (i<10)
20 {i="0" + i}
21 return i
22 }
23 </script>
24 </head>
25
26 <body onload="startTime()">
27 <div id="txt"></div>
28 </body>
29 </html>1 //详细的小时钟
2 //显示结果:2011年3月30日 星期三 下午 16:50:21
3 function showTime()
4 {
5 var obj=document.getElementById('oTime');
6 var noon;
7 var time=new Date();
8 //var TimeDifference = new Date() - new Date(obj.innerText.replace(/-/g,"/"));
9 //time = time + TimeDifference;
10 var hour=time.getHours();
11 var minute=time.getMinutes();
12 var seconds=time.getSeconds();
13 var today=new Date;
14 var week=new Array(7);
15 week[0]="天";
16 week[1]="一";
17 week[2]="二";
18 week[3]="三";
19 week[4]="四";
20 week[5]="五";
21 week[6]="六";
22 if (hour<5) noon="凌晨";
23 if (hour>4 & hour<8) noon="早晨";
24 if (hour>7 & hour<12) noon="上午";
25 if (hour==12) noon="中午";
26 if (hour>12 & hour<19) noon="下午";
27 if (hour>18 & hour<23) noon="晚上";
28 if (hour>22) noon="深夜";
29 if (hour>12) hour=hour;
30 if (hour<10) hour="0"+hour;
31 if (minute<10) minute="0"+minute;
32 if (seconds<10) seconds="0"+seconds;
33 obj.innerHTML="<font class='topm'>"+today.getYear()+"年"+(today.getMonth()+1)+"月"+today.getDate()+"日 星期"+week[today.getDay()]+" "+noon+" "+hour+":"+minute+":"+seconds+"<\/font>";
34 setTimeout("showTime();",1000);
35 }
