基于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

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