如何使用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绘制出圆形动态时钟（详解）的详细内容。更多信息请关注PHP中文网其他相关文章！

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

iPhone中缺少时钟应用程序：如何修复May 03, 2024 pm 09:19 PM

您的手机中缺少时钟应用程序吗？日期和时间仍将显示在iPhone的状态栏上。但是，如果没有时钟应用程序，您将无法使用世界时钟、秒表、闹钟等多项功能。因此，修复时钟应用程序的缺失应该是您的待办事项列表的首位。这些解决方案可以帮助您解决此问题。修复1–放置时钟应用程序如果您错误地从主屏幕中删除了时钟应用程序，您可以将时钟应用程序放回原位。步骤1–解锁iPhone并开始向左侧滑动，直到到达“应用程序库”页面。步骤2–接下来，在搜索框中搜索“时钟”。步骤3–当您在搜索结果中看到下方的“时钟”时，请按住它并

如何在 iPhone 上使用多计时器与 iOS 17Jun 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怎么隐藏元素但不占空间Jun 01, 2022 pm 07:15 PM

两种方法：1、利用display属性，只需给元素添加“display:none;”样式即可。2、利用position和top属性设置元素绝对定位来隐藏元素，只需给元素添加“position:absolute;top:-9999px;”样式。

iOS 17中如何自定义待机颜色Sep 23, 2023 pm 12:53 PM

Apple在iOS17中提供了一种新的锁屏模式，称为待机模式，当您的iPhone插入充电器（有线或无线）并以横向方向放置在支架上时，该模式会激活。此模式将通过显示时钟、天气数据、日历和一些小部件，一目了然地显示比标准锁定屏幕更多的信息。在设置中启用此功能后，当您的iPhone在充电时横向放置时，它将自动进入待机模式。如何在iOS17中更改待机颜色待机模式提供了一组三个页面（小部件、照片和时钟），您可以通过在屏幕上滑动来回切换。在这些页面中，只有“时钟”屏幕可让您自定义屏幕上显示的颜色，以便您可以

如何在 iPhone 上关闭闹钟 [2023]Aug 21, 2023 pm 01:25 PM

自从智能手机问世以来，它们无疑取代了闹钟。如果您拥有iPhone，则可以使用时钟应用程序在一天中的多个场合轻松设置任意数量的闹钟。该应用程序可让您配置闹钟时间，提示音，重复的频率，以及您是否希望使用“贪睡”选项来延迟它们。如果您想关闭已设置的闹钟，以下帖子应该可以帮助您禁用和删除iPhone上的常规闹钟和唤醒闹钟。如何在iPhone上关闭常规闹钟默认情况下，当您在时钟应用程序上添加闹钟或要求Siri为您添加闹钟时，您实际上是在创建常规闹钟。您可以在iPhone上创建任意数量的闹钟，并且可以将它们