国产又粗又猛大又黄又爽,国产在线拍揄自揄拍无码,久久久国产精华液999999

導(dǎo)讀網(wǎng)頁(yè)的本質(zhì)就是超級(jí)文本標(biāo)記語(yǔ)言，通過(guò)結(jié)合使用其他的Web技術(shù)（如：腳本語(yǔ)言、公共網(wǎng)關(guān)接口、組件等），可以創(chuàng)造出功能強(qiáng)大的網(wǎng)頁(yè)。因而，超級(jí)文本標(biāo)記語(yǔ)言是萬(wàn)維網(wǎng)（Web）編程的基礎(chǔ)，也就是說(shuō)萬(wàn)維網(wǎng)是建立...

網(wǎng)頁(yè)的本質(zhì)就是超級(jí)文本標(biāo)記語(yǔ)言，通過(guò)結(jié)合使用其他的Web技術(shù)（如：腳本語(yǔ)言、公共網(wǎng)關(guān)接口、組件等），可以創(chuàng)造出功能強(qiáng)大的網(wǎng)頁(yè)。因而，超級(jí)文本標(biāo)記語(yǔ)言是萬(wàn)維網(wǎng)（Web）編程的基礎(chǔ)，也就是說(shuō)萬(wàn)維網(wǎng)是建立在超文本基礎(chǔ)之上的。超級(jí)文本標(biāo)記語(yǔ)言之所以稱為超文本標(biāo)記語(yǔ)言，是因?yàn)槲谋局邪怂^“超級(jí)鏈接”點(diǎn)。

在這個(gè)時(shí)間就是金錢的時(shí)代，人們的時(shí)間意識(shí)越來(lái)越強(qiáng)，不僅僅是平時(shí)的日常生活，在上網(wǎng)的同時(shí)也是尤為如此，那么在前端開(kāi)發(fā)的時(shí)候，學(xué)會(huì)使用css3制作一個(gè)時(shí)鐘就顯得很有必要了。本篇文章給大家?guī)?lái)的內(nèi)容是關(guān)于，有一定的參考價(jià)值，有需要的朋友可以參考一下，希望對(duì)你有所幫助。

使用css3繪制出圓形動(dòng)態(tài)時(shí)鐘的原理

眾所周知的是div形狀是方形的，那么我們首先需要使用border-radius屬性將其變換成圓形。
為了使指針轉(zhuǎn)動(dòng)起來(lái)，我們需要使用 -webkit-transform-origin:center 100px;來(lái)設(shè)置我們的旋轉(zhuǎn)基點(diǎn)。然后利用 -webkit-transform: rotate(0);讓我們的li旋轉(zhuǎn)相應(yīng)的角度形成相應(yīng)的刻度。
設(shè)計(jì)好刻度之后，需要涉及一個(gè)nth-of-type()的選擇器，用來(lái)規(guī)定其屬于父元素的第幾個(gè)子元素。
在圓形時(shí)鐘的正中心我們要設(shè)一個(gè)div icon用于指針的連接點(diǎn)。
然后我們利用js獲取div之后對(duì)表盤的刻度進(jìn)行渲染。
最后開(kāi)一個(gè)定時(shí)器，每隔一秒執(zhí)行一次函數(shù)。

使用css3繪制出圓形動(dòng)態(tài)時(shí)鐘的代碼

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"/>
    <title>鐘表</title>
<style id="css">
        #wrap{width:200px; height:200px; border:2px solid #000; margin:100px auto;border-radius:50%; position:relative;}
        #wrap ul{margin:0; padding:0; height:200px; position:relative; list-style:none;}
        #wrap ul li{width:2px;  height:6px; background:#000; position:absolute; left:99px; top: 0;-webkit-transform-origin:center 100px;}
        /*#wrap ul li:nth-of-type(1){-webkit-transform: rotate(0);}
        #wrap ul li:nth-of-type(2){-webkit-transform: rotate(6deg);}
        #wrap ul li:nth-of-type(3){-webkit-transform: rotate(12deg);}
        #wrap ul li:nth-of-type(4){-webkit-transform: rotate(18deg);}
        #wrap ul li:nth-of-type(5){-webkit-transform: rotate(24deg);}
        #wrap ul li:nth-of-type(6){-webkit-transform: rotate(30deg);}
        #wrap ul li:nth-of-type(7){-webkit-transform: rotate(36deg);}
        #wrap ul li:nth-of-type(8){-webkit-transform: rotate(42deg);}*/
        #wrap ul li:nth-of-type(5n+1){ height:12px;}
        #hour{width:6px;  height:45px; background:#000; position:absolute; left:97px; top:55px;-webkit-transform-origin:bottom ;}
        #min{width:4px;  height:65px; background:#999; position:absolute; left:98px; top:35px;-webkit-transform-origin:bottom ;}
        #sec{width:2px;  height:80px; background:red; position:absolute; left:99px; top:20px;-webkit-transform-origin:bottom ;}
        .icon{width:20px; height:20px; background:#000; border-radius:50%; position:absolute; left:90px; top: 90px;}
    </style>
</head>
<body>
    <div id="wrap">
    <ul id="list">
        <!--<li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>-->
    </ul>
        <div id="hour"></div>
        <div id="min"></div>
        <div id="sec"></div>
        <div></div>
    </div>
    <script>
        var oList=document.getElementById("list");//獲取到刻度
        var oCss=document.getElementById("css");
        var oHour=document.getElementById("hour");//獲取時(shí)針
        var oMin=document.getElementById("min");//獲取分針
        var oSec=document.getElementById("sec");//獲取秒針
        var oLi="";
        var sCss="";
        for (var i=0;i<60;i++) { //一個(gè)表盤總共是60個(gè)刻度
            sCss+="#wrap ul li:nth-of-type("+(i+1)+"){-webkit-transform: rotate("+i*6+"deg);}";
            oLi+="<li></li>";
        };
        oList.innerHTML=oLi;
        oCss.innerHTML+=sCss;//表盤刻度渲染完成
        toTime();
        setInterval(toTime,1000);
        function toTime(){
            var oDate=new Date();//獲取當(dāng)前時(shí)間
            var iSec=oDate.getSeconds();//獲取當(dāng)前秒
            var iMin=oDate.getMinutes()+iSec/60;//獲取當(dāng)前分
            var iHour=oDate.getHours()+iMin/60;//獲取當(dāng)前時(shí)
            oSec.style.WebkitTransform="rotate("+iSec*6+"deg)";//秒針轉(zhuǎn)動(dòng)角度1秒6度 (表盤一圈360度一圈60秒所以一秒6度)
            oMin.style.WebkitTransform="rotate("+iMin*6+"deg)";//分鐘轉(zhuǎn)動(dòng)角度1分6度 (表盤一圈360度一圈60分所以一分6度)
            oHour.style.WebkitTransform="rotate("+iHour*30+"deg)";//時(shí)針轉(zhuǎn)動(dòng)角度一小時(shí)30度(表盤一圈360度一圈12小時(shí)所以一小時(shí)30度)
        };
</script>
</body>
</html>

實(shí)例效果如圖所示

以上就是如何使用css3繪制出圓形動(dòng)態(tài)時(shí)鐘（詳解）的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章！

網(wǎng)站建設(shè)是一個(gè)廣義的術(shù)語(yǔ)，涵蓋了許多不同的技能和學(xué)科中所使用的生產(chǎn)和維護(hù)的網(wǎng)站。

溫馨提示：喜歡本站的話，請(qǐng)收藏一下本站！

當(dāng)前位置:雨林木風(fēng)下載站 > 網(wǎng)頁(yè)設(shè)計(jì)教程 > 詳細(xì)頁(yè)面

如何使用css3繪制出圓形動(dòng)態(tài)時(shí)鐘（詳細(xì)說(shuō)明）

本類教程下載

系統(tǒng)下載排行