<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>超酷时钟</title> <style> *{ margin:0px; padding:0px; } body { background:#9FF; color:white; font-size:50px; } #bg { 100%; height:400px; background-image:url(image/bg.png); background-repeat:no-repeat; margin-left:450px; margin-top:100px; } #bg #tittle { 220px; height:60px; padding-left:240px; padding-top:40px; } #bg #date { 600px; height:50px; padding-left:70px; margin-top:20px; } #bg #watch { 400px; height:60px; padding-left:150px; margin-top:20px; } #bg #day { 150px; height:50px; padding-left:280px; margin-top:20px; } #day #d1 { float:left; } #day #d2 { margin-left:5px; float:left; } </style> <script> function toDou(n) { if (n<10) return '0'+n; else return ''+n; } window.onload=function() { var oWtc=document.getElementById('watch'); var aWmg=oWtc.getElementsByTagName('img'); function tick1() { var oDate1=new Date(); var str1=toDou(oDate1.getHours())+toDou(oDate1.getMinutes())+toDou(oDate1.getSeconds()); for (var i=0; i<aWmg.length; i++) { aWmg[i].src='image/'+str1.charAt(i)+'.png'; } } setInterval(tick1, 1000); tick1(); var oDte=document.getElementById('date'); var aDmg=oDte.getElementsByTagName('img'); function tick2() { var oDate2=new Date(); var str2=toDou(oDate2.getFullYear())+toDou(oDate2.getMonth()+1)+toDou(oDate2.getDate()); var k=0; for (var i=0; i<aDmg.length; i++) { if (i==4 || i==7 || i==10) continue; aDmg[i].src='image/'+str2.charAt(k++)+'.png'; } } setInterval(tick2, 24*60*60*1000); tick2(); var oDay=document.getElementById('day'); var aYmg=oDay.getElementsByTagName('img'); function tick3() { var oDate3=new Date(); var d=oDate3.getDay(); for (var i=0; i<aYmg.length; i++) { if (i==0) continue; aYmg[i].src='image/'+d+'.jpg'; } } setInterval(tick3, 24*60*60*1000); tick3(); }; </script> </head> <body> <div id="bg"> <div id="tittle"> <img src="image/title.png"/> </div> <div id="date"> <img src="image/2.png"/> <img src="image/0.png"/> <img src="image/1.png"/> <img src="image/5.png"/> <img src="image/year.png"/> <img src="image/1.png"/> <img src="image/2.png"/> <img src="image/month.png"/> <img src="image/1.png"/> <img src="image/3.png"/> <img src="image/0.jpg"/> </div> <div id="watch"> <img src="image/0.png"/> <img src="image/0.png"/> : <img src="image/0.png"/> <img src="image/0.png"/> : <img src="image/0.png"/> <img src="image/0.png"/> </div> <div id="day"> <div id="d1"><img src="image/week.png"/></div> <div id="d2"><img src="image/0.jpg"/></div> </div> </div> </body> </html>