jquery版時鐘（css3實現）

標籤：style   class   blog   code   http   ext   

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

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

　　一、圖片示範

　　

　　二、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則是時針旋轉度數。

　　查看示範 下載代碼

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