lovecoding
/
W250511


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778
							<!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);
        } */
    </style>
</head>
<body>
    <div class="box">
        <div class="clock">
            <ul id="clock-item">
                
            </ul>
        </div>
    </div>
    <script>
        // 获取刻度容器
        var clickItem = document.getElementById("clock-item");

        // 生成刻度
        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);
        }
    </script>
</body>
</html>