<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>New Web Project</title>
<style>
body{
margin:0px;
padding:0px;
}
#timer{
margin:0px auto;
padding-top:100px;
width:950px;
}
</style>
<script>
window.οnlοad=function(){
var imgs=document.getElementsByClassName('timer');
setInterval(clock,1000);
clock();
/**
* 将获取的时间的时、分、秒,都转变成两位数,并以字符串的形式返回
*/
function toDouStr(n){
if(n<10){
return '0'+n;
}
else
{
return ''+n;
}
}
/**
* 通过改变图片,达到时钟的效果
*/
function clock(){
var oDate=new Date();
var sTimer=toDouStr(oDate.getHours())+toDouStr(oDate.getMinutes())+toDouStr(oDate.getSeconds());
for(var i=0;i<sTimer.length;i++)
{
imgs[i].src='img/'+sTimer.charAt(i)+'.png';
}
}
};
</script>
</head>
<body>
<div id="timer">
<img class="timer" src="img/0.png" />
<img class="timer" src="img/0.png" />
<img src="img/点.png" />
<img class="timer" src="img/0.png" />
<img class="timer" src="img/0.png" />
<img src="img/点.png" />
<img class="timer" src="img/0.png" />
<img class="timer" src="img/0.png" />
</div>
</body>
</html>
注意事项:
1. Date对象获取的时、分、秒,都是Number类型,所以需要转化为字符串
2. 对于字符串sTimer,当应用sTimer[i]时,在IE7中是不兼容的,sTimer.charAt(i)才兼容所有浏览器,所 以我们这里使用charAt()。
所用到的图片如下所示: