lovecoding
/
W260426


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172
							<!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>
        .box{
           width: 404px;
           height: 404px;
           border:2px dashed black;
           position: fixed;
           top: 50%;
           left: 50%;
           transform: translate(-50%,-50%);
        }
        .clock{
            width: 400px;
            height: 400px;
            border: 2px solid black;
            border-radius: 50%;
            position: relative;
        }
        .clock .tick-line{
            width: 2px;
            height:6px;
            background-color: black;
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            transform-origin: center 200px;
        }
        .clock .tick-line:nth-child(5n+1){
            height: 12px;
        }
        /* .clock .tick-line:nth-child(2){
            transform:translateX(-50%) rotate(6deg);
            
            
        } */
    </style>
</head>
<body>
    <div class="box">
        <div class="clock">
            <!-- 刻度 -->
            <div class="tick">
                <!-- <div class="tick-line"></div>
                <div class="tick-line"></div> -->
            </div>
            <!-- 指针 -->
            <div class="pointer"></div>
        </div>
    </div>
    <script>
        // 获取元素
        var tick = document.querySelector(".tick");

        // 循环创建刻度线
        for(var i=0;i<60;i++){
            // 创建刻度线元素
            var line = document.createElement("div");
            // 给刻度线元素添加类名
            line.classList.add("tick-line");
            // 给刻度线元素添加角度
            line.style.transform = "translateX(-50%) rotate("+i*6+"deg)";
            // 给刻度线元素添加到刻度容器中
            tick.appendChild(line);
        }
    </script>
</body>
</html>