标签：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>数码时钟</title> <style type="text/css"> img{ width:100px } </style> <script type="text/javascript"> function toDouble(num){ if(num < 10){ return "0" + num; }else{ return "" + num; //从数字变为字符串。 } } //当小时数 、分钟数 、秒数都是个位数时，比如3点4分2秒。这时候字符串只有的长度只有3，就不能每位数字对应一个图片，所以需要将个位数字补成两位，就是说把3:4:2改为03:04:02。 window.onload = function(){ var aImg = document.getElementsByTagName(‘img‘); var i = 0; function upTime(){ var date = new Date(); var str = toDouble(date.getHours()) + toDouble(date.getMinutes()) + toDouble(date.getSeconds()); for(i = 0;i < aImg.length;i++){ aImg[i].src = "img/" + str.charAt(i) + ".png"; //charAt()：获取字符串指定位置的字符。 } } setInterval(upTime,1000); //当每次刷新压面的时候就会发先所有的图片都回先变成0；因为这个时候upTime还没有执行。 upTime(); //在开启定时器之后先调用一次函数就解决了问题。 } </script> </head> <body style="color:red;font-size:40px;background:#222;"> <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"/> 秒 </body> </html>
照几张0 - 9的数字照片试试吧！
标签：
原文地址：http://www.cnblogs.com/maxqi/p/5790919.html
