如何使用css3繪製出圓形動態時鐘（詳解）-css教學-PHP中文網

首頁

web前端

css教學

如何使用css3繪製出圓形動態時鐘（詳解）

坏嘻嘻

Sep 30, 2018 am 10:15 AM

css3 時鐘

在這個時間就是金錢的時代，人們的時間意識越來越強，不僅僅是平時的日常生活，在上網的同時也是尤為如此，那麼在前端開發的時候，學會使用css3製作一個時鐘就顯得很有必要了。這篇文章帶給大家的內容是關於，有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。

使用css3畫出圓形動態時鐘的原理

#眾所周知的是div形狀是方形的，那麼我們首先需要使用border-radius屬性將其變換成圓形。
為了讓指標轉動起來，我們需要使用 -webkit-transform-origin:center 100px;來設定我們的旋轉基點。然後利用 -webkit-transform: rotate(0);讓我們的li旋轉對應的角度形成對應的刻度。
設計好刻度之後，需要涉及一個nth-of-type()的選擇器，用來規定其屬於父元素的第幾個子元素。
在圓形時鐘的正中心我們要設一個div icon用於指標的連接點。
然後我們利用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繪製出圓形動態時鐘（詳解）

以上是如何使用css3繪製出圓形動態時鐘（詳解）的詳細內容。更多資訊請關注PHP中文網其他相關文章！

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

熱AI工具

熱工具

熱門話題

gmail信箱登陸入口在哪裡

7890

Java教學

1650

CakePHP 教程

1411

Laravel 教程

1302

PHP教程

1248

Related knowledge

純CSS3怎麼實現波浪效果？（程式碼範例） Jun 28, 2022 pm 01:39 PM

純CSS3怎麼實現波浪效果？這篇文章就來跟大家介紹一下使用 SVG 和 CSS 動畫來製作波浪效果的方法，希望對大家有幫助！

iPhone中缺少時鐘應用程式：如何修復 May 03, 2024 pm 09:19 PM

您的手機中缺少時鐘應用程式嗎？日期和時間仍將顯示在iPhone的狀態列上。但是，如果沒有時鐘應用程序，您將無法使用世界時鐘、碼錶、鬧鐘等多項功能。因此，修復時鐘應用程式的缺失應該是您的待辦事項清單的首位。這些解決方案可以幫助您解決此問題。修復1–放置時鐘應用程式如果您錯誤地從主畫面中刪除了時鐘應用程序，您可以將時鐘應用程式放回原位。步驟1–解鎖iPhone並開始向左側滑動，直到到達「應用程式庫」頁面。步驟2–接下來，在搜尋框中搜尋「時鐘」。步驟3–當您在搜尋結果中看到下方的「時鐘」時，請按住它並

如何在 iPhone 上使用多計時器與 iOS 17 Jun 21, 2023 am 08:18 AM

什麼是iOS17上的多計時器？在iOS17中，Apple現在為用戶提供了在iPhone上一次設定多個計時器的能力。這是一個可喜的變化，許多人多年來一直期待的變化。時鐘應用程式在iOS16之前只允許使用者一次設定一個計時器，現在可用於啟動任意數量的計時器，使其成為您一次完成多個任務的理想選擇。您可以在計時器畫面中設定任意數量的計時器。啟動計時器後，所有活動計時器都將在鎖定螢幕介面和通知中心顯示為「即時活動」通知。從這裡，您可以查看計時器關閉、暫停或停止計時器的剩餘時間，而無需打開時鐘應用程式。當您在時鐘

iOS 17：如何在待機模式下變更iPhone時鐘樣式 Sep 10, 2023 pm 09:21 PM

待機是一種鎖定螢幕模式，當iPhone插入充電器並以水平（或橫向）方向定位時啟動。它由三個不同的螢幕組成，其中一個是全螢幕時間顯示。繼續閱讀以了解如何變更時鐘的樣式。 StandBy的第三個畫面顯示各種主題的時間和日期，您可以垂直滑動。某些主題也會顯示其他訊息，例如溫度或下一個鬧鐘。如果您按住任何時鐘，則可以在不同的主題之間切換，包括數位、類比、世界、太陽能和浮動。 Float以可自訂的顏色以大氣泡數字顯示時間，Solar具有更多標準字體，具有不同顏色的太陽耀斑設計，而World則透過突出顯示世界地

巧用CSS實現各種奇形怪狀按鈕（附代碼） Jul 19, 2022 am 11:28 AM

這篇文章帶大家看看怎麼使用 CSS 輕鬆實現高頻出現的各類奇形怪狀按鈕，希望對大家有幫助！

如何在 iPhone 上關閉鬧鐘 [2023] Aug 21, 2023 pm 01:25 PM

自從智慧型手機問世以來，它們無疑取代了鬧鐘。如果您擁有iPhone，則可以使用時鐘應用程式在一天中的多個場合輕鬆設定任意數量的鬧鐘。該應用程式可讓您配置鬧鐘時間，提示音，重複的頻率，以及您是否希望使用“貪睡”選項來延遲它們。如果您想關閉已設定的鬧鐘，以下貼文應該可以幫助您停用和刪除iPhone上的常規鬧鐘和喚醒鬧鐘。如何在iPhone上關閉常規鬧鐘預設情況下，當您在時鐘應用程式上添加鬧鐘或要求Siri為您添加鬧鐘時，您實際上是在創建常規鬧鐘。您可以在iPhone上創建任意數量的鬧鐘，並且可以將它們