为啥有2对重复的数字，没发现问题，求大神指导一下-慕课网

为啥有2对重复的数字，没发现问题，求大神指导一下

来源：3-1 CSS3时钟效果
蒹葭苍沧
2021-01-21 07:52
<!DOCTYPE html><html lang='zh-cn'>    <head>        <title>css3时钟动画</title>        <meta charset="utf-8">        <style type="text/css">            *{                margin: 0;                padding: 0;            }            ul{                list-style: none;            }            h1{                text-align: center;                color: #333;                margin-top: 40px;                font-family: 'Microsoft yahei';            }            /*表盘*/            .clock{                position: relative;                width: 200px;                height: 200px;                border-radius: 100%;                background-color: #292a38;                margin: 50px auto;            }            .pointer li.circle{                position: absolute;                top: 50%;                left: 50%;                transform-origin: left center;                background: #fff;                width: 10px;                height: 10px;                border-radius: 100%;                margin-top: -5px;                margin-left: -5px;            }            /*刻度*/            .line-hour li,            .line-min li{                position: absolute;                left: 50%;                top: 50%;                transform-origin: left center;                background-color: #fff;            }            .line-hour li{                width: 10px;                height: 2px;            }            .line-min li{                width: 5px;                height: 2px;            }           /*数字*/            .number{                position: absolute;                left: 50%;                top: 50%;                height: 150px;                width: 150px;                transform: translate(-50%,-50%);                font-family: 'Microsoft yahei';                font-size: 16px;                color: #fff;            }            .number li{                position: absolute;                transform: translate(-50%,-50%);            }             /*指针*/            .pointer li{                position: absolute;                top:  50%;                left: 50%;                transform-origin: left center;                background: #fff;            }            .pointer li.hour{                width: 45px;                height: 3px;                margin-top: -1px;            }            .pointer li.min{                width: 60px;                height: 2px;                margin-top: -1px;            }            .pointer li.sec{                width: 80px;                height: 1px;                margin-top: -1px;            }        </style>    </head>    <body>          <h1>CSS 时钟效果分布实现</h1>        <div class="clock">            <ul class="line-min"></ul>            <ul class="line-hour"></ul>            <ol class="number"></ol>            <ul class="pointer">                <li class="hour"></li>                <li class="min"></li>                <li class="sec"></li>                <li class="circle"></li>            </ul>        </div>        <script src="jquery.min.js"></script>        <script type="text/javascript">            $(function(){                function init(){                    drawLines($('.line-min'),60,85);                    drawLines($('.line-hour'),12,80);                    drawNumbers($('.number'));                    move();                }                init();                /*                *绘制钟表刻度线                *@param wrap 刻度线的父容器                *@param total 制度线的总个数                *@param translateX  制度线在X轴方向的偏移量                */                function drawLines(wrap,total,translateX){                    var gap=360/total;                    var strHtml='';                    for(var i=0;i<total;i++){                        strHtml+='<li style="transform:rotate('+(i*gap)+'deg) translate('+translateX+'px,-50%)"></li>';                    }                    wrap.html(strHtml);                }               /*                *绘制时钟数字                *@param wrap数字的父容器                */                function drawNumbers(wrap){                    var radius=wrap.width()/2;                    var strHtml='';                    for(var i=1;i<=12;i++){                        myAngle=(i-3)/6*Math.PI;                        var myX=radius+radius*Math.cos(myAngle),//X=r+rcos(@)                            myY=radius+radius*Math.sin(myAngle);//Y=r+rsin(@)                        strHtml+='<li style="left:'+myX+'px;top:'+myY+'px">'+i+'</li>';                    }                    wrap.html(strHtml);                }                /*钟表走动、转动秒针、分针、时针*/                function move(){                    var domHour=$('.hour'),                        domMin=$('.min'),                        domSec=$('.sec');                    setInterval(function(){                        var now=new Date(),                            hour=now.getHours(),                            min=now.getMinutes(),                            sec=now.getSeconds();                        var secAngle=sec*6-90,                            minAngle=min*6+sec*0.1-90,                            hourAngle=hour*30+min*0.5-90;                        domSec.css('transform','rotate('+secAngle+'deg)');                        domMin.css('transform','rotate('+minAngle+'deg)');                        domHour.css('transform','rotate('+hourAngle+'deg)');                        document.title=hour+':'+min+':'+sec;                    },1000);                }            });        </script>    </body></html>
写回答关注