H5+CSS3實(shí)現(xiàn)時(shí)鐘效果-創(chuàng)新互聯(lián)

這篇文章將為大家詳細(xì)講解有關(guān)H5+CSS3實(shí)現(xiàn)時(shí)鐘效果，文章內(nèi)容質(zhì)量較高，因此小編分享給大家做個(gè)參考，希望大家閱讀完這篇文章后對(duì)相關(guān)知識(shí)有一定的了解。

專注于為中小企業(yè)提供成都網(wǎng)站建設(shè)、網(wǎng)站建設(shè)服務(wù),電腦端+手機(jī)端+微信端的三站合一,更高效的管理,為中小企業(yè)禹王臺(tái)免費(fèi)做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動(dòng)了上千多家企業(yè)的穩(wěn)健成長(zhǎng)，幫助中小企業(yè)通過(guò)網(wǎng)站建設(shè)實(shí)現(xiàn)規(guī)模擴(kuò)充和轉(zhuǎn)變。

目的：

利用html5，css實(shí)現(xiàn)鐘擺效果

知識(shí)點(diǎn)：

1）利用position/left/top和calc()實(shí)現(xiàn)元素的水平和垂直居中；

2）利用CSS3的animation/transform/transform-origin屬性定義動(dòng)畫(huà)；

3）利用transform-origin實(shí)現(xiàn)旋轉(zhuǎn)原點(diǎn)的圓心調(diào)整

廢話不多說(shuō)了，直接看代碼吧，具體代碼如下所示：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        li{
            list-style:none;
        }
        #box{
            width: 400px;
            height: 400px;
            position: absolute;
            top:calc(50% - 200px);
            left:calc(50% - 200px);
            border: 2px solid palegoldenrod;
        }
        #dial{
            width: 200px;
            height: 200px;
            position: absolute;
            top:calc(50% - 100px);
            left:calc(50% - 100px);
            border: 2px solid cyan;
            border-radius: 50%;
        }   
        .scaleIndex{
            width: 4px;
            height: 12px;
            position: absolute;
            top: 0;
            left: calc(50% - 2px);
            background-color: gray;
            transform-origin: 2px 100px;
        }
        .angle30{transform : rotate(30deg);}
        .angle60{transform : rotate(60deg);}
        .angle90{transform : rotate(90deg);}
        .angle120{transform : rotate(120deg);}
        .angle150{transform : rotate(150deg);}
        .angle180{transform : rotate(180deg);}
        .angle210{transform : rotate(210deg);}
        .angle240{transform : rotate(240deg);}
        .angle270{transform : rotate(270deg);}
        .angle300{transform : rotate(300deg);}
        .angle330{transform : rotate(330deg);}
        #fixPoint{
            width: 10px;
            height: 10px;
            position: absolute;
            top:calc(50% - 5px);
            left:calc(50% - 5px);
            background-color: cadetblue;
            border-radius: 50%;
        }
        #hourHand{
            width: 6px;
            height: 70px;
            position:absolute;
            top: 40px;
            left: calc(50% - 3px);
            background-color: darkblue;
            transform-origin: 50% 60px;
        }
        #minuteHand{
            width: 4px;
            height: 75px;
            position:absolute;
            top: 35px;
            left: calc(50% - 2px);
            background-color: yellow;
            transform-origin: 50% 65px;
        }
        #secondHand{
            width: 2px;
            height: 90px;
            position:absolute;
            top: 20px;
            left: calc(50% - 1px);
            background-color: red;
            transform-origin: 50% 80px;
        }
    </style>
</head>
<body>
    <p id = "box">
            <p id = 'dial'>
                <ul id = "scale">
                    <li class = "scaleIndex"></li>
                    <li class = "scaleIndex angle30"></li>
                    <li class = "scaleIndex angle60"></li>
                    <li class = "scaleIndex angle90"></li>
                    <li class = "scaleIndex angle120"></li>
                    <li class = "scaleIndex angle150"></li>
                    <li class = "scaleIndex angle180"></li>
                    <li class = "scaleIndex angle210"></li>
                    <li class = "scaleIndex angle240"></li>
                    <li class = "scaleIndex angle270"></li>
                    <li class = "scaleIndex angle300"></li>
                    <li class = "scaleIndex angle330"></li>
                </ul>
                <p id = "fixPoint"></p>
                <p id = "hourHand"></p>
                <p id = "minuteHand"></p>
                <p id = "secondHand"></p>
            </p>
        </p>
<script type = 'text/javascript' src = 'js/jquery-3.2.1.js'></script>
<script type = "text/javascript">
window.onload = function(){
            var hourHand = document.getElementById('hourHand');
            var minuteHand = document.getElementById('minuteHand');
            var secondHand = document.getElementById('secondHand');
setInterval(function(){
                    var currentTime = new Date();
                    var hourValue = currentTime.getHours();
                    var hourAngle = hourValue / 24 * 360 + 'deg';
                    var minuteValue = currentTime.getMinutes();
                    var minuteAngle = minuteValue / 60 * 360 + 'deg';
                    var secondValue = currentTime.getSeconds();
                    var secondAngle = secondValue / 60 * 360 + 'deg';
                    console.log(hourAngle);
// 方法一：利用jquery的css()增加屬性
var cmdHour = 'rotate('+ hourAngle +')';
$('#hourHand').css({transform:'rotate('+ hourAngle +')'});
var cmdMinute = 'rotate('+ minuteAngle +')';
$('#minuteHand').css({transform:cmdMinute});
var cmdSecond = 'rotate('+ secondAngle +')';
$('#secondHand').css({transform:cmdSecond});
// 方法二：利用DOM元素的style屬性設(shè)置
//      hourHand.style.transform = 'rotate('+ hourAngle + ')';
//      minuteHand.style.transform = 'rotate('+ minuteAngle + ')';
//      secondHand.style.transform = 'rotate('+ secondAngle + ')';  
},1000);
}
    </script>
</body>
</html>

關(guān)于H5+CSS3實(shí)現(xiàn)時(shí)鐘效果就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到。

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無(wú)理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。

網(wǎng)頁(yè)標(biāo)題：H5+CSS3實(shí)現(xiàn)時(shí)鐘效果-創(chuàng)新互聯(lián)
文章來(lái)源：http://jinyejixie.com/article34/dipppe.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站營(yíng)銷、品牌網(wǎng)站設(shè)計(jì)、網(wǎng)站排名、域名注冊(cè)、網(wǎng)站制作、外貿(mào)網(wǎng)站建設(shè)

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

成人午夜视频全免费观看高清-秋霞福利视频一区二区三区-国产精品久久久久电影小说-亚洲不卡区三一区三区一区

H5+CSS3實(shí)現(xiàn)時(shí)鐘效果-創(chuàng)新互聯(lián)