transform實現的時鐘效果

時間 2019-11-20

標籤 transform 實現時鐘效果简体版

原文原文鏈接

又來一個時鐘效果了，這個的實現不須要canvas，都是div、ul、li畫出的，好玩有真實。css

哈哈~html

須要的js才能實現到走動這個效果，但js的內容很少，也不難。canvas

主要是一個css裏transform的使用的思路，transform裏有不少變幻屬性，而普通的時鐘函數

在我心中就是個圓圓的東西，那麼是否是能夠旋轉這個屬性（rotate）實現了，它的刻度spa

使用旋轉且把旋轉點設置在圓心，那不就能夠繞着圓心轉了嗎，而時針它們的底部不是和code

圓心接觸的嗎，那麼設置時針的底部爲旋轉點不就OK了，大概的說了說思路。orm

代碼：htm

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>transform</title>
    <style id="css">
        #clock{
            width: 200px;
            height: 200px;
            border: 2px solid #000;
            border-radius: 50%;
            margin: 100px auto 0;
            position: relative;
        }
        #clock ul{
            width: 200px;
            height: 200px;
            position: relative;
            list-style: none;
            padding:0;
            margin: 0;
        }
        #clock ul li{
            width: 2px;
            height: 10px;
            background: #000;
            transform-origin: center 100px;
            position: absolute;
            top: 0;
            left: 50%;
        }
        #clock ul li:nth-of-type(5n+1){
            height: 20px;
        }    
        #hour{
            height: 40px;
            width: 4px;
            background: #00fefe;
            position: absolute;
            top: 60px;
            left: 99px;
            transform-origin:center bottom;
        }
        #min{
            height: 60px;
            width: 3px;
            background: #001afe;
            position: absolute;
            top: 40px;
            left: 99px;
            transform-origin: center bottom;
            transform: rotate(15deg);
        }
        #sec{
            height: 70px;
            width: 2px;
            background: #000;
            position: absolute;
            top: 30px;
            left: 99px;
            transform-origin:center bottom;
        }
        #dot{
            width: 10px;
            height: 10px;
            position: absolute;
            left: 95px;
            top: 95px;
            background: #aaa;
            border-radius: 50%;
        }
    </style>
</head>
<body>
    <div id="clock">
        <ul></ul>
        <div id="hour"></div>
        <div id="min"></div>
        <div id="sec"></div>
        <div id="dot"></div>
    </div>
    <script>
        var oCss=document.getElementById("css"); 
        var oClock=document.getElementById("clock");
        var oUl=oClock.getElementsByTagName("ul")[0];
        var oHour=document.getElementById("hour");
        var oMin=document.getElementById("min");
        var oSec=document.getElementById("sec");
        var strLi="";
        var strCss="";
        for(var i=0;i<60;i++){
            strLi+="<li></li>";
        }
        oUl.innerHTML=strLi;
        for(var i=0;i<60;i++){
            strCss+='#clock ul li:nth-of-type('+(i+1)+'){transform:rotate('+i*6+'deg);}';
        }
        oCss.innerHTML+=strCss;
        time();
        setInterval(time,1000);
        function time(){
        var date=new Date();
        var h=date.getHours();
        var m=date.getMinutes();
        var s=date.getSeconds();

        oHour.style.transform="rotate("+(h+m/60)*30+"deg)";
        oMin.style.transform="rotate("+(m+s/60)*6+"deg)";
        oSec.style.transform="rotate("+s*6+"deg)";
        }
    </script>
</body>
</html>

使用標籤畫圖最主要的是定位，由於這樣咱們就能夠把弄到形狀的盒子放到你所想要的位置，內部css樣式表是能夠使用獲取元素的方式獲取的，這樣就能夠blog

使用innerHTML爲其添加樣式，且能夠循環添加，還有由於刻度太多因此使用循環添加，這樣省時省力，至於剩下的就是定時器了，給定好1秒的時間，每1ip

秒執行一次函數，這樣它就是動起來了。

相關標籤/搜索

每日一句

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