<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>time</title> <style type="text/css"> body{background: #000;color: #fff;font-size: 60px;line-height: 100px} img{width:100px;vertical-align:middle;} #btn1{padding:10px;color:red;} </style> <script type="text/javascript"> function toDouble(num){//小于10的数字前面加0 if(num<10){ return ‘0‘+num; }else{ return ‘‘+num; } } window.onload=function(){ //var str=oDate.getHours()+‘点‘+oDate.getMinutes()+‘分‘+oDate.getSeconds()+‘秒‘; //alert(str); var oBtn=document.getElementById(‘btn1‘); var aImg=document.getElementsByTagName(‘img‘); var i=0; function upDateTime(){ var oDate=new Date(); var str=toDouble(oDate.getHours())+toDouble(oDate.getMinutes())+toDouble(oDate.getSeconds()); //alert(str); //var arr=[‘2‘,‘1‘,‘3‘,‘4‘,‘5‘,‘5‘]; for(i=0;i<aImg.length;i++){ aImg[i].src=‘img/‘+str.charAt(i)+‘.png‘;//charAt()返回字符串当前位置的数值 } } setInterval(upDateTime,1000);//函数名不加括号,setInterval有一秒的延迟 upDateTime(); } </script> </head> <body> <img src="img/0.png"/> <img src="img/0.png"/> <span>点</span> <img src="img/0.png"/> <img src="img/0.png"/> <span>分</span> <img src="img/0.png"/> <img src="img/0.png"/> <span>秒</span> </body> </html>
原文：http://www.cnblogs.com/Mr-W/p/6294014.html