1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style> 7 .c { 8 position: relative; 9 600px; 10 height: 600px; 11 margin: 20px auto; 12 background: url("images/clock.jpg") no-repeat center center; 13 } 14 .c div { 15 position: absolute; 16 top: 0; 17 left: 0; 18 100%; 19 height: 100%; 20 21 } 22 .h { 23 background: url("images/hour.png") no-repeat center center; 24 } 25 .m { 26 background: url("images/minute.png") no-repeat center center; 27 } 28 .s { 29 background: url("images/second.png") no-repeat center center; 30 } 31 </style> 32 <script> 33 window.onload = function () { 34 function $(id){ 35 return document.getElementById(id); 36 } 37 function $arr(array){ 38 return document.getElementsByTagName(array); 39 } 40 var h = $("hour"); 41 var m = $("minute"); 42 var s = $("second"); 43 hour = 0 44 minute =0 45 second = 0 46 var hour = 0,minute = 0,second = 0,ms=0; 47 setInterval(function(){ 48 var date = new Date(); 49 ms = date.getMilliseconds(); 50 second = date.getSeconds() + ms/1000; 51 minute = date.getMinutes() + second/60; 52 hour = date.getHours()%12 + minute/60; 53 s.style.webkitTransform = "rotate("+second*6+"deg)"; 54 m.style.webkitTransform = "rotate("+minute*6+"deg)"; 55 h.style.webkitTransform = "rotate("+hour*30+"deg)"; 56 },1000); 57 58 } 59 </script> 60 </head> 61 <body> 62 <div class="c" id="clock"> 63 <div class="h" id="hour"></div> 64 <div class="m" id="minute"></div> 65 <div class="s" id="second"></div> 66 </div> 67 </body> 68 </html>
