jquery版時鍾（css3實現）

　　做時鍾的主要原因是因為喜歡，覺得它好看（本人對特效有點愛不釋手……）。做的時候感覺工程量會有點大，做着做着發現實現起來其實並不難，只要理清思緒，其實還蠻簡單的（我制作東西喜歡整體方向制定好，然后邊做邊找感覺，最后可能會有不一樣的驚喜）。

　　我這里采用了時鍾的背景圖片，第一我覺得圖片好看，第二我覺得應該先實現主要的功能再考慮畫圖（總歸來說就是有點懶，哈哈~）。好了，廢話不多說啦，進入正題。

　　一、圖片演示

　　

　　二、html代碼

<div class="box">
    <div class="clock"> <!-- 時鍾背景圖 -->
        <div class="second-hand"></div> <!-- 秒針 -->
        <div class="minute-hand"></div> <!-- 分針 -->
        <div class="hour-hand"></div> <!-- 時針 -->
    </div>
</div>

 　　三、css代碼

        .box {margin: 10px auto; width: 894px; height: 863px;}
        .clock {position: relative; width: 894px; height: 863px; background: url("images/bg.png") no-repeat;}
        .second-hand,.minute-hand,.hour-hand {position: absolute; left: 50%; margin-left: -6px; top: -13px; width: 20px; height: 894px; background: url("images/clock_needle.png") no-repeat;}
        /* 三根針的長度和時鍾的寬度保持一致（最長的），這樣可以實現以中心旋轉 */
        .second-hand {background-position: -1px 59px; z-index: 1000;}
        .minute-hand {background-position: -25px 56px; z-index: 100;}
        .hour-hand {background-position: -54px 56px; z-index: 10;}

　　分析：

　　這里需要注意的是，要讓秒針、分針和時針的長度和時鍾的寬度（長度，誰長就和誰一樣）一致（時鍾最好是正方形的），因為圖片旋轉的時候，是以圖片中心為圓心旋轉。

　　四、js代碼

        $(function(){
            var $second = $(".second-hand"), /* 秒針 */
                    $minute = $(".minute-hand"), /* 分針 */
                    $hour = $(".hour-hand"), /* 時針 */
                    nowTime = function(){ /* 執行函數 */
                        /* 得到現在的小時，分鍾和秒 */
                        function getTime(){
                            var now = new Date();
                            return {
                                hours: now.getHours() + now.getMinutes() / 60, /* 小時數，包括分鍾數 */
                                minutes: now.getMinutes() + now.getSeconds() / 60, /* 分針數，包括秒數 */
                                seconds: now.getSeconds() /* 秒數 */
                            }
                        }
                        var _date = getTime(); /* 接收的時間對象 */
                        /* 秒針，一圈360度總共是60秒（60格），一秒（一格）就是6度，乘以6的主要原因就是秒數乘以一格的度數等於總度數 */
                        var _secondRotate = Math.floor(_date.seconds) * 6;
                        /* 分針，一圈360度總共是60分鍾，和秒數解釋類似 */
                        var _minuteRotate = _date.minutes * 6;
                        /* 時針，一圈360度是12個小時，一個小時就是30度（其實也是5格），小時數乘以一小時的度數就是總度數。但是要考慮大於12的小時數，這里采取整除12的方發即可實現 */
                        var _hourRotate =  (_date.hours % 12) * 30;
                        $second.css({"transform":"rotate("+_secondRotate+"deg)"}); /* 設置秒針旋轉度 */
                        $minute.css({"transform":"rotate("+_minuteRotate+"deg)"}); /* 設置分針旋轉度 */
                        $hour.css({"transform":"rotate("+_hourRotate+"deg)"}); /* 設置時針旋轉度 */
                    }

            setInterval(nowTime,1000); /* 循環調用，一秒后調用一次 */

        })

　　分析：

　　注釋講解的比較清楚，我這里主要強調一下如何獲取秒針、分針和時針的旋轉度數。

　　秒針，旋轉一圈總共是60秒，一圈也就是360°。這樣想想，一秒就是6°，一圈總共是60格，一秒是一格也是6°，即秒針的旋轉度數就是秒數乘以6。

　　分針，分針的解釋和秒針類似。它旋轉一圈是60分鍾，所以一分鍾旋轉6度，一分鍾是一格也是6°，即分針的旋轉度數是分鍾數乘以6。

　　時針，一圈是12個小時，一個小時應該是360/12=30°，所以時針的旋轉角度為小時數乘以30°。也可以這樣解釋，一個小時占了5格，一格是6°，即小時數乘以5再乘以6則是時針旋轉度數。

　　查看演示 下載代碼

 　　如果有哪里講得不好或者不對的對方歡迎指正，謝謝~