一个超酷的数码时钟（走秒的）

之前，在网上看视频，学习做了一个数码时钟，会走秒的那种，请看效果：

所以，我今天又想起来，重新找了这个呆毛，自己敲了一遍。现在分享给大家。

这0-9数字是图片：

html代码：

  <img src="img/0.png" />
  <img src="img/0.png" /> :
  <img src="img/0.png" />
  <img src="img/0.png" /> ：
  <img src="img/0.png" />
  <img src="img/0.png" />

将需要的位数的图片设置为初始的‘0’图片。

js代码：

function od(n) {
    if (n < 10) {
      return "0" + n;

    } else {
      return "" + n;
    }
  }
  window.onload = function() {
    var imgArr = document.getElementsByTagName('img');
    function timer() {
      var oDate = new Date();
      var str = od(oDate.getHours()) + od(oDate.getMinutes()) + od(oDate.getSeconds());
      for (var i = 0; i < imgArr.length; i++) {
        imgArr[i].src = "img/" + str.charAt(i) + ".png";
      }
    }
    setInterval(timer, 1000);
    timer();
  }

getHours()、getMinutes()、getSeconds()是时间函数，之前有写过一篇js处理时间的函数，有需要的童鞋请戳戳戳戳戳戳戳戳戳

od函数是对取到的当前的时间函数进行处理，如果小于10，就在其前面加一个‘0’，很容易理解的。

我们来着重讲一下charAt()方法：

charAt() 方法可返回指定位置的字符。
请注意，JavaScript 并没有一种有别于字符串类型的字符数据类型，所以返回的字符是长度为 1 的字符串。
其语法是：

stringObject.charAt(index) // index 必需。表示字符串中某个位置的数字，即字符在字符串中的下标。

注：字符串中第一个字符的下标是 0。如果参数 index 不在 0 与 string.length 之间，该方法将返回一个空字符串。

举个例子：

<script type="text/javascript">

var str="Hello world!"
document.write(str.charAt(1))

</script>

输出结果就是e

拿到所有的img标签，用for循环，给发生img的src进行重新赋值，得到新的img数组

做一个定时器，一秒跑一次函数，更新一次数组。

tips：一秒等于一千毫秒。