zoukankan      html  css  js  c++  java
  • CSS3 时钟效果实现

    效果图:

    知识点: 

    1、transform-origin

    2、弧度计算公式  (2*Math.PI/360)*角度

    3、表盘数字计算方法

    x=r(1+Math.cos(弧度));

    y=r(1+math.sin(弧度));

    完整代码:

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
            <style type="text/css">
                /*all tip*/
                *{
                    padding:0;
                    margin: 0;
                }
                ol,ul{
                    list-style: none;
                }
                .clock{
                    width:200px;
                    height:200px;
                    margin: 50px auto;
                    background: #292a38;
                    border-radius:50%;
                    position: relative;
                }
                /*表盘数字*/
                .clocknum{
                    position: relative;
                    width:150px;
                    height: 150px;
                    top:50%;
                    left:50%;
                    transform: translate(-50%,-50%);
                }
                .clocknum li{
                    position: absolute;
                    top:50%;
                    left:50%;
                    font-size:15px;
                    transform: translate(-50%,-50%);
                    color: #fff;
                    transform-origin:left center;
                }
                
                /*刻度*/
                .line-hour li,
                .line-min li{
                    position: absolute;
                    top:50%;
                    left:50%;
                    background: #fff;
                    transform-origin:left center;
                    /*transform-origin设置旋转元素的基点位置 
                     * transform前li的左侧顶点是时钟的中心
                     * 如果不设置transform-origin 默认是center center 则是以偏移前li的中心点而非左侧顶点进行旋转。整个表盘会偏移
                     * */
    
                }
                .line-hour li{
                    width:10px;
                    height:2px;
                }
                .line-min li{
                    width:5px;
                    height:2px;
                }
                /*指针*/
                .point li{
                    position: absolute;
                    top:50%;
                    left:50%;
                    background: #fff;
                    transform-origin:left center;
                }
                
                .point li.circle{
                    width:10px;
                    height:10px;
                    border-radius: 50%;
                    transform: translate(-50%,-50%);
                }
                .point li.hour{
                    width:45px;
                    height:3px;
                    margin-top:-1;
                }
                .point li.min{
                    width:60px;
                    height:2px;
                    margin-top:-1;
                }
                .point li.sec{
                    width:80px;
                    height:1px;
                    margin-top:-1;
                }
            </style>
        </head>
        <body>
            <div class="clock">
                <ul class="line-min"></ul>
                <ul class="line-hour"></ul>
                <ol class="clocknum"></ol>
                <ul class="point">
                    <li class="hour"></li>
                    <li class="min"></li>
                    <li class="sec"></li>
                    <li class="circle"></li>
                </ul>
            </div>
        </body>
        <script src="js/jquery.min.js" ></script>
        <script>
            //画刻度
            drawline($(".line-min"),60,85);
            drawline($(".line-hour"),12,80);
            function drawline(wrap,num,translate){
                var gap=360/num;
                for(var i=0;i<num;i++)
                {
                    var $li=$("<li/>").css({
                        "transform":"rotate("+gap*i+"deg)  translate("+translate+"px,50%)"
                    });
                    wrap.append($li);
                }
            }
            
            //画表盘数字
            drawnumber($('.clocknum'),12);
            function drawnumber(wrap,num){
                var r=$(".clocknum").width()/2;//半径
                for(var i=1;i<num+1;i++)
                {
                    var radian=(2*Math.PI/360)*(i*30-90);//通过角度求弧度  i*30-90是角度
                    myX=r*(1+Math.cos(radian));
                    myY=r*(1+Math.sin(radian));
                    var $li=$("<li>"+i+"</li>").css({
                        "left":myX+"px",
                        "top":myY+"px",
                    });
                    wrap.append($li);
                }
            }
            
            //画指针
            setInterval(drawpoint,1000);
            var time=new Date();
            var sec=time.getSeconds();
            var min=time.getMinutes();
            var hour=time.getHours();
            var subsec=(360/60);//秒针1s旋转6度
            var submin=(360/3600);//分针1s旋转0.1度
            var subhour=(360/12/3600);//时针1s旋转360/12/3600度
            
            var degsec=(subsec*sec-90)%360;//(6*s-90)%360
            var degmin=(submin*(min*60+sec)-90)%360; //(0.1*(m*60+s)-90)360%
            var deghour=(subhour*(hour*3600+min*60+sec)-90)%360; //防止超过360度的情况
            
            function drawpoint(){
                degsec+=(360/60);
                degmin+=(360/3600);
                deghour+=(360/12/3600);
                
                degsec=degsec>=360?0:degsec;
                degmin=degmin>=360?0:degmin;
                deghour=deghour>=360?0:deghour;
                $(".point li.sec").css({
                    "transform":"rotate("+degsec+"deg)"
                });
                $(".point li.min").css({
                    "transform":"rotate("+degmin+"deg)"
                });
                $(".point li.hour").css({
                    "transform":"rotate("+deghour+"deg)"
                });
            }
            
        </script>
    </html>
  • 相关阅读:
    你不知道的空格
    导致你的微服务走向失败的11个原因
    阿里巴巴正式开源 Inclavare Containers 技术
    如何分辨区块链传销项目?
    编写干净的 React Components & JSX
    面试:3年工作经验程序员应有的技能
    数据库设计规范化的 5 个要求
    mac下镜像飞速安装Homebrew教程
    对优秀程序员的思考
    程序员理想中的工作环境
  • 原文地址:https://www.cnblogs.com/liangtao999/p/11869808.html
Copyright © 2011-2022 走看看