如何用原生JS制作图片时钟

程序设计之道无远弗届，御晨风而返。———— 杰佛瑞 · 詹姆士

今天分享一个小demo，如何用原生JS制作图片时钟，话不多说上代码。

html
 [外链图片转存失败(img-mD0n42FM-1562234069896)(https://mp.youkuaiyun.com/mdeditor/img/0.png)]
 [外链图片转存失败(img-CBf3twCe-1562234069897)(https://mp.youkuaiyun.com/mdeditor/img/0.png)]
 ：
 [外链图片转存失败(img-HHUqXzdx-1562234069898)(https://mp.youkuaiyun.com/mdeditor/img/0.png)]
 [外链图片转存失败(img-zbH5kpAW-1562234069899)(https://mp.youkuaiyun.com/mdeditor/img/0.png)]
 ：
 [外链图片转存失败(img-ImS2ZyN0-1562234069900)(https://mp.youkuaiyun.com/mdeditor/img/0.png)]
 [外链图片转存失败(img-8LG4duD9-1562234069900)(https://mp.youkuaiyun.com/mdeditor/img/0.png)]

先在HTML里添加几张图片，接下来是核心部分。

js
 var imgs=document.getElementsByTagName("img");    //这里获取页面图片
    function  pd(i){
        if (i<10)
        {i="0" + i}
        return i
    }   //这个函数是判断时钟如果是个位数的话前面加个0，这样做美观一些

    function  foo(){
         var data = new Date;               //获取现在时间
         var hours =  data.getHours();      //小时
         var minutes = data.getMinutes();   //分钟
         var seconds = data.getSeconds();   //秒数
        hours = pd(hours);                  //判断是否是个位数，否则加0
        minutes = pd(minutes);
        seconds = pd(seconds);
         var times = String(hours)+String(minutes)+String(seconds); //把他们分别转成字符串，不然他们会相加
         for (var i=0; i<imgs.length; i++){
             imgs[i].src='img/'+times[i]+'.png';   //遍历这个时间位数，并改变图片的src属性达到换图片效果。
         }
    }
    foo();                       //这里调用函数，不调用开始时候全部为00:00：00
    setInterval(foo,1000);       //每隔一秒调用一次函数。

大概就是这样的思路，不断的替换图片就好了。若是哪里不对，欢迎大佬指点。