1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style type="text/css"> 7 *{ 8 margin:0; 9 padding:0; 10 } 11 h2{ 12 width:50px; 13 margin:0 auto; 14 } 15 div{ 16 width: 300px; 17 text-align: center; 18 background: red; 19 margin:50px auto; 20 } 21 </style> 22 <script type="text/javascript"> 23 window.onload= function () { 24 getTime(); 25 setInterval(getTime,1000); 26 function getTime() { 27 var date = new Date(); 28 var hours = date.getHours(); 29 var one = parseInt(hours / 10); 30 var two = parseInt(hours % 10); 31 var minutes = date.getMinutes(); 32 var three = parseInt(minutes / 10); 33 var four = parseInt(minutes % 10); 34 var second = date.getSeconds(); 35 var five = parseInt(second / 10); 36 var six = parseInt(second % 10); 37 var imgs = document.getElementsByTagName("img"); 38 imgs[0].src = "images/" + one + ".png"; 39 imgs[1].src = "images/" + two + ".png"; 40 imgs[2].src = "images/" + three + ".png"; 41 imgs[3].src = "images/" + four + ".png"; 42 imgs[4].src = "images/" + five + ".png"; 43 imgs[5].src = "images/" + six + ".png"; 44 } 45 } 46 </script> 47 </head> 48 <body> 49 <h2>时钟</h2> 50 <div> 51 <img src="images/0.png"> 52 <img src="images/0.png">： 53 <img src="images/0.png"> 54 <img src="images/0.png">： 55 <img src="images/0.png"> 56 <img src="images/0.png"> 57 </div> 58 </body> 59 </html>
