時鐘效果案例
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>
運作效果：
![JS 實作3D立體效果的首頁輪播圖（瞬間讓你的網站高大上，逼格滿滿）還是那句話，廢話少說，直接上源代碼：http://download.csdn.net/detail/cometwo/9387901
進階擴充[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)