JavaScript中用date创建时钟的方法,刚才写了一篇date的简单使用方法;http://taobao.fm/archives/735

首先了解下时钟的思路;

 

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script>
window.onload=function()
{
var aImg=document.getElementsByTagName('img')
var str='013621'; //假设我们给定一个时间,这个时候我们只需要用date获取实际时间就可以了;

for (var i= 0;i<aImg.length;i++)
{
aImg[i].src='images/'+str[i]+'.png';//这个src显示的图片就是第几个位置的图片;
}

}
</script>
</head >
<body style="background:black; color:white; font-size:60px;" >
<img src="images/0.png" />
<img src="images/0.png" />
:
<img src="images/0.png" />
<img src="images/0.png" />
:
<img src="images/0.png" />
<img src="images/0.png" />
</body>
</html>

上面这个函数,是制定一个时间人,然后用for循环来显示使用的src图片;

最终的样子:

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script>
function toDou(n)
{
if(n<10)
{
return '0'+n;//这个函数是加0用的
}
else
{
return ''+n;//这个可以保证即使是个2位数,返回的和空字符串相加也是一个字符串
}
}
window.onload=function()
{
var aImg=document.getElementsByTagName('img')
function jike(){
var oDate=new Date();
var str=toDou(oDate.getHours())+toDou(oDate.getMinutes())+toDou(oDate.getSeconds())
for (var i= 0;i<aImg.length;i++)
{
aImg[i].src='images/'+str[i]+'.png';//这个src显示的图片就是第几个位置的图片;
}
}
setInterval(jike,1000);
jike();
}
</script>
</head >
<body style="background:black; color:white; font-size:60px;" >
<img src="images/0.png" />
<img src="images/0.png" />
:
<img src="images/0.png" />
<img src="images/0.png" />
:
<img src="images/0.png" />
<img src="images/0.png" />
</body>
</html>

这个时候再IE7下是不兼容的,具体原因看:http://taobao.fm/archives/740

我们可以修改后的就可以了如下:

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script>
function toDou(n)
{
if(n<10)
{
return '0'+n;//这个函数是加0用的
}
else
{
return ''+n;//这个可以保证即使是个2位数,返回的和空字符串相加也是一个字符串
}
}
window.onload=function()
{
var aImg=document.getElementsByTagName('img');
function jike(){
var oDate=new Date();
var str=toDou(oDate.getHours())+toDou(oDate.getMinutes())+toDou(oDate.getSeconds())
for (var i= 0;i<aImg.length;i++)
{
aImg[i].src='images/'+str.charAt(i)+'.png';//用charAt后,我们就可以完全兼容IE7了;
}
}
setInterval(jike,1000);
jike();
}
</script>
</head >
<body style="background:black; color:white; font-size:60px;" >
<img src="images/0.png" />
<img src="images/0.png" />
:
<img src="images/0.png" />
<img src="images/0.png" />
:
<img src="images/0.png" />
<img src="images/0.png" />
</body>
</html>