jquery版時鐘（css3實現）

時間 2019-12-08

標籤 jquery 時鐘 css3 css 實現欄目 JQuery 简体版

原文原文鏈接

　　作時鐘的主要緣由是由於喜歡，以爲它好看（本人對特效有點愛不釋手……）。作的時候感受工程量會有點大，作着作着發現實現起來其實並不難，只要理清思緒，其實還蠻簡單的（我製做東西喜歡總體方向制定好，而後邊作邊找感受，最後可能會有不同的驚喜）。css

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

　　1、圖片演示函數

　　2、html代碼url

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

　　3、css代碼spa

        .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;}

　　分析：.net

　　這裏須要注意的是，要讓秒針、分針和時針的長度和時鐘的寬度（長度，誰長就和誰同樣）一致（時鐘最好是正方形的），由於圖片旋轉的時候，是以圖片中心爲圓心旋轉。code

　　4、js代碼orm

        $(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); /* 循環調用，一秒後調用一次 */

        })