<html>
<head>
<script type="text/javascript">
function startTime()//函数startTime, 功能:显示当前时间
{ var today=new Date()//声明一个时间对象
var h=today.getHours()//获取当前小时
var m=today.getMinutes()//获取当前分钟
var s=today.getSeconds()//获取当前秒数
// add a zero in front of numbers<10
m=checkTime(m)//调用checkTime函数,功能见下面
s=checkTime(s)//调用checkTime函数,功能见下面 document.getElementById('txt').innerHTML=h+":"+m+":"+s //在txt标签里输出时间 小时:分钟:秒
t=setTimeout('startTime()',500) //每隔500毫秒(0.5秒)刷新一次时间,为了实现时间动态显示效果
}
function checkTime(i)//checkTime函数,设置小于10的时间数字格式,例如5秒显示成05秒 {
if (i<9)
{i="0" + i}
return i
}
</script>
</head>
<body onload="startTime()"> //页面加载时调用startTime函数
<div id="txt"></div>//用来显示时间的标签
</body>
</html>
看上面的代码: Javascript中:小时钟t=setTimeout('startTime()',500)为什么隔500毫秒就刷新页面而不是每隔1000毫秒(即1秒)再刷新一次页面? 原因: 这里的setTimeout是递归执行的。也就是在执行一次后,时间更新以后,才会设置下次的setTimeout,这里执行更新时间的代码也是要耗费时间的,因为javascript是脚本语言,又基于浏览器,性能比较差,而且更新时间是dome操作,比较慢。所以设置500能保证精度,避免延迟。 如果设置1000毫秒刷新页面,由于程序的执行还需要时间,所有刷新页面的时间必然大于1000毫秒=1秒,此时就有可能出现秒数不是依次增加1秒,例如:在开始执行程序时时间是12点30分30.9秒,而页面是精确到1秒,所有页面上显示的是12:30:30,如果设置1000毫秒(实际上是1.3秒)更新一次,则下次页面显示的时间是12点30分32秒(因为30.9+1.3=32.2),直接跳过12点30分31秒,这样更新就不及时了,对吧? 设置500毫秒更新一次页面是通常做法,但是也不能设置太小,刷新太频繁会造成浏览器负载的浪费。