JavaScript之数码时钟

下面，我就教大家如何利用JavaScript做一个简单的数码时钟。
在做之前我们需要在网上找到从0-9的10张数字图片，保存到一个文件夹里面，并将数字图片对应为相应的数字，作为我们的素材工具。
具体步骤如下所示：
首先在body部分插入6张图片。

<img src="C:\Users\asus\Desktop\img/0.png"/>
<img src="C:\Users\asus\Desktop\img/0.png"/>
.
.
<img src="C:\Users\asus\Desktop\img/0.png"/>
<img src="C:\Users\asus\Desktop\img/0.png"/>
.
.
<img src="C:\Users\asus\Desktop\img/0.png"/>
<img src="C:\Users\asus\Desktop\img/0.png"/>   //图片路径全部设为0是为了以后修改图片路径更加方便

在script部分修改图片路径，如下所示：

<script>
window.function()
{
     var aImg=document.getElementsByTagName('img'); //把所有图片选取出来
     var str='112134';  //根据当前时间的时分秒放一个相应的字符串
     for(var i=0;i<aImg.legth;i++)
     {
          aImg[i].src='img/'+str[i]+'.png';  //第i个图片对应字符串第i个路径
      }
  };
 </script>      

但是当前的字符串是一个静态的字符串，不会根据当前的时间而发生相应的改变。那么，如何使当前字符串变为动态的呢，请看下面一段代码：

<script>
functon toDou(n)
{
     if(n<10)   //说明n是1位数，我们需要在前面加个0
     {
          return '0'+n;
      }
      else
      {
           return ' '+n;  //空字符串加n可以保证返回值一定是一个字符串
       }
   };
window.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.legth;i++)
     {
          aImg[i].src='img/'+str.charAt(i)+'.png';  //第i个图片对应字符串第i个路径,其中charAt可以使字符串的某一位是兼容的
      }
      }
      setInterval(tick,1000);   
      tick(); //tick在onload里面直接执行一次 ，不会出现1秒钟的延迟
  };
 </script>      

这样，一个简单的数码时钟就完成了。