css3を使って円形の動的時計を描く方法（詳しく解説）-CSSチュートリアル-php.cn

css3を使って円形の動的時計を描く方法（詳しく解説）

坏嘻嘻

リリース： 2018-09-30 10:15:06

オリジナル

3593 人が閲覧しました

時は金なりのこの時代、人々は日常生活だけでなく、特にインターネットサーフィンをするときにもますます時間を意識するようになり、フロントエンドを開発する際には、css3 を使用して時計を作成する方法を学びます。十分必要なようです。この記事で紹介する内容は、それに関するものであり、困っている友人が参考になれば幸いです。

css3 を使用して円形の動的時計を描画する原理

よく知られているように、 div の形状が正方形である場合は、最初に border-radius プロパティを使用して円に変換する必要があります。
ポインターを回転させるには、 -webkit-transform-origin:center 100px; を使用して回転の基点を設定する必要があります。次に、 -webkit-transform:rotate(0); を使用して、対応する角度を回転させ、対応するスケールを形成します。
スケールを設計した後、nth-of-type() セレクターを使用して、親要素に属する子要素を指定する必要があります。
円形の時計の中心に、ポインタの接続ポイントの div アイコンを設定する必要があります。
次に、js を使用して div を取得し、ダイヤルのスケールをレンダリングします。
最後に、タイマーを開始し、関数を毎秒実行します。

#css3 を使用して円形の動的時計を描画するコード

<!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");//获取时针
        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>

ログイン後にコピー

効果の例は次のとおりです。以下のように、図に示すように

css3を使って円形の動的時計を描く方法（詳しく解説）