用js制作简单的时钟

简易时钟效果图如下 (需要单击图片看效果)

用js制作简单的时钟

用js制作简易的时钟代码如下

html代码:

1
2
3
4
5
6
7
8
9
10
<body style="background:#CCC; font-size:50px; color:#FFF; text-align:center; margin:100px auto;"><br>
<img src="./images/0.gif" />
<img src="./images/0.gif" />
:
<img src="./images/0.gif" />
<img src="./images/0.gif" />
:
<img src="./images/0.gif" />
<img src="./images/0.gif" />
</body>

以上样式为行内样式,因为没有太多的样式就直接采用行间样式。img标签是你本地图片的储存路径,你需要制作0123456789十张图片。

js代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
function toDou(n)
{
    if(n<10)
    {
        return '0'+n;
    }
    else
    
        return ''+n;
    }
}
window.onload=function()
{
 var aImg=document.getElementsByTagName("img");  
  function tick(){
  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)+'.gif';
 }
 }
  setInterval(tick,1000);
  tick();
};

真实效果链接链接: http://pan.baidu.com/s/1eRZgClc 密码: 2imd
虚拟主机
《编写高质量JavaScript代码的68个有效方法》PDF
《JavaScript权威指南(第6版)(中文版)》PDF
《你不知道的JavaScript(中卷)》PDF
《JavaScript设计模式与开发实践 》PDF
广告也精彩