js中一个简单的表

  <div class="clock">
        <div class="circle"></div>
        <div class="hour"></div>
        <div class="minutes"></div>
        <div class="seconds"></div>


        <!-- 添加数字1-12 -->
        <div class="nums"> </div>

    </div>

 * {
            margin: 0;
            padding: 0;
        }

        .clock {
            position: relative;
            width: 200px;
            height: 200px;
            border: solid 14px rgb(247, 129, 149);
            border-radius: 50%;
            margin: 100px auto;
            background: linear-gradient( rgb(190, 155, 223),pink);

        }
        .circle{
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-50%);
            width: 12px;
            height: 12px;
            background-color: black;
            border-radius: 50%;
            
            /* 优先显示它 */
            z-index: 5;
        }
        .hour {
            position: absolute;
            left: 49.5%;
            top: 48px;
            width: 4px;
            height: 50px;
            background-color: blue;
            
		/* steps(60)--分60步走*/
            animation: run 21600s steps(60) infinite;

            /* 绕着底部旋转 */
            transform-origin: bottom;

            z-index: 3;

        }
        .minutes {
            position: absolute;
            left: 49.5%;
            top: 28px;
            width: 3px;
            height: 70px;
            background-color: rgb(240, 83, 83);

            animation: run 3600s steps(60) infinite;

            transform-origin: bottom;
            z-index: 2;

        }
        .seconds {
            position: absolute;
            left: 50%;
            top: 2px;
            width: 2px;
            height: 96px;
            background-color: pink;
            animation: run 60s steps(60) infinite;
            transform-origin: bottom;
        }

        .ps {
            width: 100%;
            height: 100%;
        }
        .number {
            position: absolute;
            left: 50%;
            width: 10px;
            height: 98px;
            transform-origin: bottom;
            color: rgb(230, 53, 156);
            font-weight: bold;
            font-size: 20px;
        }
        .number:last-child {
            left: 47%;
        }
        @keyframes run {
            0% {
                transform: rotate(0);
            }
            100% {
                transform: rotate(360deg)
            }
        }

 <script>

        var nums = document.querySelector('.nums')

        var dd = 30;

        for (var i = 1; i < 13; i++) {

            // 创建一个div保存数字
            var number = document.createElement('div');
            number.className = 'number';

            // 下标就是对应的数字1-12
            number.innerText = i;

            // 追加到页面中
            nums.appendChild(number);

            // 数字分别旋转对应的角度
            number.style.transform = "rotate(" + dd + "deg)";

            // 确定要旋转的度数----30deg/60deg/90deg.....
            if (dd < 360) {
                dd += 30;
            }
        }
         </script>