基于JavaScript的数码时钟

用JavaScript+html+css做的一个简易的数码时钟，具有一定的观赏性，Demo效果：

具体步骤如下：

数码时钟的做法思路就是：给出六张图片，分别对应“时分秒”六个数字，然后用JS实时获取当前时间，并与图片数字对应，最后设置定时器，让时钟动起来。

HTML部分

<ul>
   <li><img src="images/0.png" alt=""></li>
   <li><img src="images/0.png" alt=""></li>
   <li></li>
   <li><img src="images/0.png" alt=""></li>
   <li><img src="images/0.png" alt=""></li>
   <li></li>
   <li><img src="images/0.png" alt=""></li>
   <li><img src="images/0.png" alt=""></li>
</ul>

标注：将用到的数字图片命名为对应的数字，比如“0”这张数字图片的名字为“0”；为什么这么做呢？待会就知道啦！第三个li和第六个li为啥空着呐？那是因为这两个位置是用来放置冒号图片的，小编是在css样式里给它加上对应的背景图片。

下面增加点CSS样式修饰一下图片：

<style>
      body{
         background: rgba(228, 22, 255, 0.32);
      }
      ul{
         position: absolute;
         width: 80%;
         top:250px;
         left:50px;
         text-align: center;
      }
      ul li{
         display: inline-block;
         list-style: none;
      }
      li:nth-child(6){
         width:100px;
         height:100px;
         background: url("images/mao.png") no-repeat;
         background-size: 100% 100%;
      }
      li:nth-child(3){
         width:100px;
         height:100px;
         background: url("images/mao.png") no-repeat;
         background-size: 100% 100%;
      }
      img{
         width:100px;
         height:143px;
      }
 </style>

初始效果图：

现在加上JavaScript代码，让它动起来，动起来的原理，除了设置定时器外，就是实时改变图片的路径，将它与获取到的时间一一对应，也就是为什么要把图片名字命名为对应的数字，妙就妙在这里！

附上JavaScript代码部分：

<script>
       function add(i) {      //设置函数，如果获取到的时间<10,就在它前面加上字符“0”，比如获取到的小时为5，那么输出就是“05”
           if(i<10)
               return '0'+i;
           else
              return ''+i;
       }
      window.onload=function () {
          setInterval(function(){
              var time = new Date();
              var hour = time.getHours(),   //获取当前小时数字
                  min  = time.getMinutes(), //获取当前分钟数字
                  sec  = time.getSeconds(); //获取当前秒数数字
              hour=add(hour);               //应用转化函数
              min=add(min);                 //应用转化函数
              sec=add(sec);                 //应用转化函数
              var Img=document.getElementsByTagName('img');  //获取图片，此时获取到是数组
              var array=hour+min+sec;  //将当前时间连接在一起
              for(var i=0;i<Img.length;i++){
                  Img[i].src='images/'+array.charAt(i)+'.png';   //charAt(i)获取某字符串的第i个字符
              }
          },1000)     //设置定时器，每隔一秒刷新页面
      }
</script>

好了，以上就是全部代码了，一个简易的数码时钟就做完了！有兴趣的同学可以试试。

另附上数码时钟的图片素材：http://pan.baidu.com/s/1kVspFBh

如有疑问，欢迎留言骚扰！