Heim > Artikel > Web-Frontend > So zeichnen Sie eine kreisförmige dynamische Uhr mit CSS3 (ausführliche Erklärung)

So zeichnen Sie eine kreisförmige dynamische Uhr mit CSS3 (ausführliche Erklärung)

坏嘻嘻Original: 2018-09-30 10:15:073501Durchsuche

In dieser Zeit, in der Zeit Geld ist, werden sich die Menschen der Zeit immer bewusster, nicht nur im täglichen Leben, sondern insbesondere auch beim Surfen im Internet. Wenn sie also lernen, mit CSS3 eine Uhr zu erstellen ist genug. Es scheint notwendig. Der Inhalt dieses Artikels handelt davon und hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen.

Das Prinzip der Verwendung von CSS3 zum Zeichnen einer kreisförmigen dynamischen Uhr

Wie wir alle wissen, ist die Da die div-Form ein Quadrat ist, müssen wir sie zunächst mit der Eigenschaft border-radius in einen Kreis umwandeln.
Um den Zeiger rotieren zu lassen, müssen wir -webkit-transform-origin:center 100px verwenden, um unseren Rotationsbasispunkt festzulegen. Verwenden Sie dann -webkit-transform:Rotate(0); um unser Li um den entsprechenden Winkel drehen zu lassen, um die entsprechende Skala zu bilden.
Nach dem Entwurf der Skala müssen Sie einen nth-of-type()-Selektor einbeziehen, um anzugeben, zu welchem untergeordneten Element es zum übergeordneten Element gehört.
In der Mitte der kreisförmigen Uhr müssen wir ein Div-Symbol für den Verbindungspunkt des Zeigers festlegen.
Dann verwenden wir js, um das Div zu erhalten und den Maßstab des Zifferblatts zu rendern.
Zuletzt starten Sie einen Timer und führen die Funktion jede Sekunde aus.

Code zum Zeichnen einer kreisförmigen dynamischen Uhr mit 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>

Der Beispieleffekt ist wie folgt Wie im Bild gezeigt

So zeichnen Sie eine kreisförmige dynamische Uhr mit CSS3 (ausführliche Erklärung)

Das obige ist der detaillierte Inhalt vonSo zeichnen Sie eine kreisförmige dynamische Uhr mit CSS3 (ausführliche Erklärung). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

css3 webkit 指针 JS 选择器 border transform li

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：So verwenden Sie CSS3 + HTML5, um Text-Neon-Effekte zu erstellen (vollständigen Code bezahlen)Nächster Artikel：So verwenden Sie CSS3 + HTML5, um Text-Neon-Effekte zu erstellen (vollständigen Code bezahlen)

In Verbindung stehende Artikel

Mehr sehen