<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>时钟</title> <script> function set(obj){ if(obj<10){ return '0'+obj; } else return ''+obj; } window.onload=function(){ var aImg=document.getElementsByTagName('img'); function tick(){ var oDate=new Date(); var str=set(oDate.getHours())+set(oDate.getMinutes())+set(oDate.getSeconds()); for(var i=0;i<str.length;i++){ aImg[i].src='img/'+str[i]+'.png'; } } tick(); setInterval(tick ,1000); //alert(str); }; </script> </head> <body style="background:red; color:red; font-size:50px"> <img src='img .png' / > <img src='img .png' /> : <img src='img .png' /> <img src='img .png' /> : <img src='img .png' /> <img src='mg .png' /> </body> </html>
定时器小应用+date对象。。。
关键在于字符串的处理。。。。
将date对象中获取的数字不会按字符串加在一起，自定义set函数将返回值全变为字符串并在个位数前补0.。。。。。
再处理每个img标签。。。配以炫酷的png/jpg图像，效果好的很。。。。