用CSS3實現鐘錶效果

時間 2019-12-14

標籤 css3 css 實現鐘錶效果欄目 CSS 简体版

原文原文鏈接

背景：最近在學習CSS3，看到了一個小案例，經過本身的學習，動手實現了它，如今把它分享出來。css

效果圖

實現過程

1.首先咱們須要在頁面中寫出一個靜態的鐘表效果。首先咱們須要一個錶盤div wrap 對其進行簡單的樣式設置，用border-radius屬性將其設置成圓形。html

<div id="wrap"></div>
        #wrap{width:200px; height:200px; border:2px solid #000; margin:100px auto;border-            radius:50%; position:relative;}

2.接下來咱們用ul和li來寫錶盤中的刻度，對其進行簡單的樣式設置。其中須要注意的是，咱們用 -webkit-transform-origin:center 100px;來設置咱們的旋轉基點。而後利用 -webkit-transform: rotate(0);讓咱們的li旋轉相應的角度造成相應的刻度。css3

<ul id="list">
            <li></li> <!--刻度-->
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
        #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;}

3.其中咱們設計到了css3的選擇器nth-of-type() ，它規定其屬於其父元素的第幾個li元素。
固然，咱們不可能將錶盤的刻度都通通去設置li的樣式去完成。咱們後面須要用js去渲染它。
在渲染以前，咱們須要去寫上咱們的秒針、分針、時針。分別是div hour、min、sec，而且咱們對其進行樣式的設置。爲了美化一下，咱們再寫一個div icon，圓點。並對其進行簡單樣式設置。web

<div id="hour"></div>
        <div id="min"></div>
        <div id="sec"></div>
        <div class="icon"></div>
        #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;}

4.接下來咱們來寫一下讓鐘錶動起來的JavaScript，首先用js去獲取各個div。函數

var oList=document.getElementById("list");//獲取到刻度
        var oCss=document.getElementById("css");
        var oHour=document.getElementById("hour");//獲取時針
        var oMin=document.getElementById("min");//獲取分針
        var oSec=document.getElementById("sec");//獲取秒針
        var oLi="";
        var sCss="";

5.接下來去渲染錶盤的刻度。學習

for (var i=0;i<60;i++) { //一個錶盤總共是60個刻度
            sCss+="#wrap ul li:nth-of-type("+(i+1)+"){-webkit-transform:             rotate("+i*6+"deg);}";
            oLi+="<li></li>";
        };
        oList.innerHTML=oLi;
        oCss.innerHTML+=sCss;//錶盤刻度渲染完成

6.接下來咱們去寫一個鐘錶錶針根據時間變更的函數，先利用new Date（）獲取時間，而後經過去改變錶針的樣式去讓錶針根據時間去轉動，秒針一秒至關於旋轉6度，分鐘一秒至關轉動6度，時針轉動1秒至關於轉動30度。spa

function toTime(){
            var oDate=new Date();//獲取當前時間
            var iSec=oDate.getSeconds();//獲取當前秒
            var iMin=oDate.getMinutes()+iSec/60;//獲取當前分
            var iHour=oDate.getHours()+iMin/60;//獲取當前時
            oSec.style.WebkitTransform="rotate("+iSec*6+"deg)";//秒針轉動角度1秒6度 (錶盤一圈360度一圈60秒因此一秒6度)
            oMin.style.WebkitTransform="rotate("+iMin*6+"deg)";//分鐘轉動角度1分6度 (錶盤一圈360度一圈60分因此一分6度)
            oHour.style.WebkitTransform="rotate("+iHour*30+"deg)";//時針轉動角度一小時30度(錶盤一圈360度一圈12小時因此一小時30度)
        };

7.最後咱們來開一個定時器，讓函數隔一秒執行一次。設計

toTime();
        setInterval(toTime,1000);

至此一個鐘錶效果就寫完了，下面是所有源代碼code

效果源碼

<!DOCTYPE html>
<html lang="en">
<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 class="icon"></div>
    </div>
    <script>
        var oList=document.getElementById("list");//獲取到刻度
        var oCss=document.getElementById("css");
        var oHour=document.getElementById("hour");//獲取時針
        var oMin=document.getElementById("min");//獲取分針
        var oSec=document.getElementById("sec");//獲取秒針
        var oLi="";
        var sCss="";
        for (var i=0;i<60;i++) { //一個錶盤總共是60個刻度
            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();//獲取當前時間
            var iSec=oDate.getSeconds();//獲取當前秒
            var iMin=oDate.getMinutes()+iSec/60;//獲取當前分
            var iHour=oDate.getHours()+iMin/60;//獲取當前時
            oSec.style.WebkitTransform="rotate("+iSec*6+"deg)";//秒針轉動角度1秒6度 (錶盤一圈360度一圈60秒因此一秒6度)
            oMin.style.WebkitTransform="rotate("+iMin*6+"deg)";//分鐘轉動角度1分6度 (錶盤一圈360度一圈60分因此一分6度)
            oHour.style.WebkitTransform="rotate("+iHour*30+"deg)";//時針轉動角度一小時30度(錶盤一圈360度一圈12小時因此一小時30度)
        };
</script>
</body>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。