标签：
1、制作前准备
在素材网上挑选你喜欢的0~9的数字图片，下载下来，用PS将这些图片切成合适在网页上显示的的大小（我切成50px*60px）。
2、布局
在HTML将这几张图片引用进去，并排显示，并在每两个中间加上“：”，将包含图片标签的DIV设置成居中。
3、功能实现
将初始的图片显示都设置成数字0，这时在静态页面上会显示“00:00:00”；因为之前已经给图片命名为0~9.png
通过getHours()、getMinutes()、getSeconds()分别获取时分秒这六个数值（需要注意的是当系统时间的时分秒小于10得在前面补0，这样才能和图片标签里的数组一一对应），
然后将这六个值传递给图片标签数组的文件名。并通过setInterval(timer,1000)来通过时间的变化完成相应数字图片的切换。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>唯美数字时钟</title> <style type="text/css"> * { padding: 0; margin: 0; } body{background: black;} #div1 { width: 600px; height: 200px;color: white;font-size: 50px; margin:50px auto; } </style> <!-- 设置为变化的时钟timer Date函数，获取系统时钟 将src里的图片替换成系统时钟， 系统时间不是两位数时间的判断，考虑‘0‘+‘系统数字‘ --> <script type="text/javascript"> window.onload=function() { var oDiv1=document.getElementById(‘body1‘); var aImg=document.getElementsByTagName(‘img‘); //var str=‘012332‘; timer=function() { //设置补0函数 function toDou(n) { if (n<10) { return ‘0‘+n; } else { return ‘‘+n; } } //获取系统时钟的函数 var aDate=new Date(); var str=toDou(aDate.getHours())+toDou(aDate.getMinutes())+toDou(aDate.getSeconds()); for (var i = 0; i < aImg.length; i++) { aImg[i].src=‘numberPicture/‘+str.charAt(i)+‘.png‘; }; } setInterval(timer,1000); timer(); } </script> </head> <body id="body1"> <div id="div1"> <img src="numberPicture/0.png"> <img src="numberPicture/0.png"> : <img src="numberPicture/0.png"> <img src="numberPicture/0.png"> : <img src="numberPicture/0.png"> <img src="numberPicture/0.png"> </div> </body> </html>
标签：
原文地址：http://www.cnblogs.com/ChenZz-blog/p/4901448.html
