用CSS3实现钟表效果

用CSS3实现钟表效果

大家好,又见面了,我是全栈君。

背景:最近在学习CSS3,看到了一个小案例,通过自己的学习,动手实现了它,现在把它分享出来。

效果图

图片描述

实现过程

1.首先我们需要在页面中写出一个静态的钟表效果。首先我们需要一个表盘div wrap 对其进行简单的样式设置,用border-radius属性将其设置成圆形。

        <div id="wrap"></div>
        #wrap{width:200px; height:200px; border:2px solid #000; margin:100px auto;border-            radius:50%; position:relative;}

2.接下来我们用ul和li来写表盘中的刻度,对其进行简单的样式设置。其中需要注意的是,我们用 -webkit-transform-origin:center 100px;来设置我们的旋转基点。然后利用 -webkit-transform: rotate(0);让我们的li旋转相应的角度形成相应的刻度。

        <ul id="list">
            <li></li> <!--刻度-->
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
        #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;}

3.其中我们设计到了css3的选择器nth-of-type() ,它规定其属于其父元素的第几个li元素。
当然,我们不可能将表盘的刻度都统统去设置li的样式去完成。我们后面需要用js去渲染它。
在渲染之前,我们需要去写上我们的秒针、分针、时针。分别是div hour、min、sec,并且我们对其进行样式的设置。为了美化一下,我们再写一个div icon,圆点。并对其进行简单样式设置。

        <div id="hour"></div>
        <div id="min"></div>
        <div id="sec"></div>
        <div class="icon"></div>
        #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;}

4.接下来我们来写一下让钟表动起来的JavaScript,首先用js去获取各个div。

        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="";

5.接下来去渲染表盘的刻度。

    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;//表盘刻度渲染完成

6.接下来我们去写一个钟表表针根据时间变动的函数,先利用new Date()获取时间,然后通过去改变表针的样式去让表针根据时间去转动,秒针一秒相当于旋转6度,分钟一秒相当转动6度,时针转动1秒相当于转动30度。

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度)
        };

7.最后我们来开一个定时器,让函数隔一秒执行一次。

        toTime();
        setInterval(toTime,1000);

至此一个钟表效果就写完了,下面是全部源代码

效果源码

<!DOCTYPE html>
<html lang="en">
<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 class="icon"></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>
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/107665.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • 西门子plc16进制转10进制_16进制字符串转数字

    西门子plc16进制转10进制_16进制字符串转数字二进制在C#中无法直接表示,我们一般用0和1的字符串来表示一个数的二进制形式。比如4的二进制为“100”。下面介绍C#里面用于进制转换的方法。十进制转换为二进制(int–>string)System.Convert.ToString(d,2);//d为int类型以4为例,输出为100十六进制转换为二进制(int–>string)System.Conver…

  • dos下拷贝服务器文件命令行,win7在DOS环境下怎么使用copy命令?使用copy命令复制文件的方法…[通俗易懂]

    dos下拷贝服务器文件命令行,win7在DOS环境下怎么使用copy命令?使用copy命令复制文件的方法…[通俗易懂]win7系统在DOS环境下,如果想复制文件,该怎么操作呢?正常复制粘贴用不了,我们可以使用copy这条命令。copy命令复制文件占用系统资源会更少,复制速度也会略快。那么DOS环境下怎么使用copy命令?我们一起阅读下文教程吧。1、在DOS环境下,如果想复制一个文件副本,并且不对文件名进行更改,则可输入如下命令:copy源文件新文件位置比如说,我想将当前目录下的1.txt文件复制到…

  • 数据库sql嵌套查询题_sql子查询嵌套优化

    数据库sql嵌套查询题_sql子查询嵌套优化一、嵌套查询概念在sql语言中,一个select-from-where语句成为一个查询块,将一个查询块嵌套在另一个查询块的where子句或having短语的条件中的查询成为嵌套查询。外层的查询块称为外层查询或父查询,内层的查询称为内层查询或子查询。注意点:子查询的select语句不能使用orderby子句,orderby只能对最终查询结果排序。嵌套查询分类:1、相关子查询/关联子查询:子查询的查询条件依赖于父查询,比如,如果子查询需要执行多次,即采用循环的方式,先从外部查询开始,每

  • 目前还存活的多个电驴下载站点!电驴达人收藏[通俗易懂]

    目前还存活的多个电驴下载站点!电驴达人收藏[通俗易懂]目前还存活的多个电驴下载站点!电驴达人收藏(2011更新) 0、http://www.emule-project.net/这个不用说了,emule官方,没有它就没有下面的所有一切,德国人开的。只提供官方版emule软件,没有资源下载。秉承理念“eMule是完全免费的,它也决不包含广告软件、间谍和流氓软件。我们之所以创造eMule是为了快乐和知识,而不…

  • 一文理解class.getClassLoader().getResourceAsStream(file)和class.getResourceAsStream(file)区别

    一文理解class.getClassLoader().getResourceAsStream(file)和class.getResourceAsStream(file)区别基础理解都是实现获取在classpath路径下的资源文件的输入流。为什么是classpath而不是src,因为当web项目运行时,IDE编译器会把src下的一些资源文件移至WEB-INF/classes,classPath目录其实就是这个classes目录。这个目录下放的一般是web项目运行时的class文件、资源文件(xml,properties…);另外,在使用spring…

  • 博科FC光纤交换机替换zone配置导入导出指导

    博科FC光纤交换机替换zone配置导入导出指导一、旧交换机配置导出。1、笔记本搭建ftp服务,可以在百度下载个ftp软件工具使用,保存的文件路径,用户名及密码例如2、老设备在命令界面操作导出命令switch:admin>configuploadProtocol(scporftp)[ftp]:ftpServerNameorIPAddress[host]:192.168.200.xxFileName[confi…

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号