时钟效果案例
1、得到现在的时分秒
2、旋转角度原理
一圈360° 60s 1s/6°
旋转
second.style.WebkitTransform="rotate(60deg)";//每秒旋转60度
案例：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>时钟效果</title> 6 <style> 7 .clock{ 8 width: 600px; 9 height: 600px; 10 margin: 50px auto; 11 background: url(images/clock.jpg) no-repeat; 12 position: relative; 13 } 14 .clock div{ 15 width: 100%; 16 height: 100%; 17 position: absolute; 18 top:0; 19 left: 0; 20 } 21 .clock .h{ 22 background: url(images/hour.png) no-repeat center center; 23 24 } 25 .clock .m{ 26 background: url(images/minute.png) no-repeat center center; 27 } 28 .clock .s{ 29 background: url(images/second.png) no-repeat center center; 30 } 31 </style> 32 </head> 33 <body> 34 <div class="clock"> 35 <div class="h" id="hour"></div> 36 <div class="m" id="minute"></div> 37 <div class="s" id="second"></div> 38 </div> 39 </body> 40 <script> 41 var h=document.getElementById("hour"); 42 var m=document.getElementById("minute"); 43 var s=document.getElementById("second"); 44 45 var h= 0,m= 0,s= 0,ms=0; 46 setInterval(function(){ 47 var date=new Date();//得到当前时间 48 ms=date.getMilliseconds();//当前的毫秒数 49 s=date.getSeconds()+ms/1000;//当前秒数+过去的秒数 1.3s 50 m=date.getMinutes()+s/60;//当前的分钟数+过去的分钟 2.8m 51 h=date.getHours()%12+m/60;//当前的小时+过去的 6.6h 52 //旋转 一圈360° 60秒 1秒6° webkit是谷歌前缀 moz是火狐 53 second.style.webkitTransform="rotate("+s*6+"deg)"; 54 minute.style.webkitTransform="rotate("+m*6+"deg)"; 55 hour.style.webkitTransform="rotate("+h*30+"deg)"; 56 //火狐 57 second.style.MozTransform="rotate("+s*6+"deg)"; 58 minute.style.MozTransform="rotate("+m*6+"deg)"; 59 hour.style.MozTransform="rotate("+h*30+"deg)"; 60 },1000) 61 62 </script> 63 </html>
运行效果：
