lovecoding
/
W250511


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141
							<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* css reset */
        *{
            margin: 0;
            padding: 0;
        }
        li{
            list-style: none;
        }


        .box{
            width: 400px;
            height: 400px;
            border:2px dashed black;
            margin:100px auto;
        }
        .clock{
            width: 400px;
            height: 400px;
            border-radius: 50%;
            border:2px solid black;
            box-sizing: border-box;
            position: relative;
        }

        .clock ul li{
            width: 4px;
            height: 6px;
            background-color: black;
            position: absolute;
            top:0;
            left: 50%;
            margin-left: -2px;
            transform-origin: center 198px;
        }
        .clock ul li:nth-child(5n+1){
            height: 12px;
        }

        /* .clock ul li:nth-child(2){
            transform: rotate(6deg);
        }
        .clock ul li:nth-child(3){
            transform: rotate(12deg);
        } */

        .hour{
            margin-left: -5px;
            margin-top: 78px;
            width: 10px;
            height: 120px;
            background-color: red;
        }
        .minute{
            margin-left: -4px;
            width: 8px;
            height: 150px;
            margin-top: 48px;
            background-color: blue;
        }
        .second{
            margin-left: -3px;
            width: 6px;
            height: 180px;
            margin-top: 18px;
            background-color: green;
            /* transform: rotate(30deg); */
        }
        .second,.hour,.minute{
            position: absolute;
            left: 50%;
            top:0;
            transform-origin: center bottom;
            /* transform: translateX(-50%); */

        }
    </style>
</head>
<body>
    <div class="box">
        <div class="clock">
            <ul id="clock-item">
                
            </ul>
            <div class="hour"></div>
            <div class="minute"></div>
            <div class="second"></div>
        </div>
    </div>
    <script>
        // 获取刻度容器
        var clickItem = document.getElementById("clock-item");
        // 获取时针
        var oHour = document.getElementsByClassName("hour");
        oHour = oHour[0];
        // 获取分针
        var oMinute = document.getElementsByClassName("minute");
        oMinute = oMinute[0];
        // 获取秒针
        var oSecond = document.getElementsByClassName("second");
        oSecond = oSecond[0];

        // 生成刻度
        for(var i=0;i<60;i++){
            // 创建li
            var oLi = document.createElement("li");
            // 为每一个li添加角度
            oLi.style.transform = "rotate("+(i*6)+"deg)";
            // 将创建好的li插入容器中
            clickItem.appendChild(oLi);
        }

        // 控制时分秒旋转
        function move(){
            // 获取时间对象
            var now = new Date();
            // 获取时分秒
            var hour = now.getHours();
            var minute = now.getMinutes();
            var second = now.getSeconds();

            // 设置旋转角度
            oSecond.style.transform = "rotate("+ (second*6) +"deg)";
            oMinute.style.transform = "rotate("+ (minute*6) +"deg)";
            oHour.style.transform = "rotate("+ (hour*30) +"deg)";
        }
        move();

        // 定时器每隔一秒运行一次
        setInterval(move,1000);

    </script>
</body>
</html>