效果如下图
附件有图片 http://files.cnblogs.com/files/biyongyao/时钟.rar
源代码
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 6 <title>Examples</title> 7 <style type="text/css"> 8 body{ 9 background:black; 10 color:white; 11 } 12 </style> 13 <script> 14 function toNum(num) //以为当是个位数时，要显示01的状态 15 { 16 if (num<10) 17 {return '0'+num;} 18 else 19 {return ""+num;} 20 21 } 22 window.onload=function() 23 { 24 25 var obj=document.getElementsByTagName("img"); 26 function tick() 27 { 28 var time= new Date(); 29 var time1=toNum(time.getHours())+toNum(time.getMinutes())+toNum(time.getSeconds()); //获取小时分钟秒的一个字符串 30 // console.log(time1); 31 for (var i=0;i<obj.length;i++) //一个有六张图片，前两张代表小时，中间两张代表分钟，后两张代表秒， 32 { 33 obj[i].src=time1[i]+'.png'; //时间字符串是什么，就显示什么图片 34 } 35 } 36 window.setInterval(tick, 1000); 37 tick(); //为了一开始不显示000000 38 39 40 } 41 </script> 42 43 </head> 44 <body> 45 <img src="0.png" alt="" /> 46 <img src="0.png" alt="" /> 47 ： 48 <img src="0.png" alt="" /> 49 <img src="0.png" alt="" /> 50 ： 51 <img src="0.png" alt="" /> 52 <img src="0.png" alt="" /> 53 54 </body> 55 </html>