lovecoding
/
W260426


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132
							<!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);
            
            
        } */
        .clock .pointer div{
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            transform-origin: center bottom;
            transition: all 1s linear;
        }
        .clock .pointer .hour-pointer{
            width: 20px;
            height: 100px;
            background-color: blue;
            top:100px;
        }
        .clock .pointer .minute-pointer{
            width: 10px;
            height: 140px;
            background-color: red;
            top:60px;
        }
        .clock .pointer .second-pointer{
            width: 6px;
            height: 180px;
            background-color: green;
            top:20px;
        }
    </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 class="hour-pointer"></div>
                <!-- 分钟指针 -->
                <div class="minute-pointer"></div>
                <!-- 秒指针 -->
                <div class="second-pointer"></div>
            </div>
        </div>
    </div>
    <script>
        // 获取元素
        var tick = document.querySelector(".tick");
        var hourPointer = document.querySelector(".hour-pointer");
        var minutePointer = document.querySelector(".minute-pointer");
        var secondPointer = document.querySelector(".second-pointer");
        // 循环创建刻度线
        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);
        }

        // 实现时钟的动画
        setInterval(function(){
            // 获取当前时间
            var time = new Date();
            // 获取当前时间的小时
            var hour = time.getHours();
            // 获取当前时间的分钟
            var minute = time.getMinutes();
            // 获取当前时间的秒
            var second = time.getSeconds();
           
            // 计算秒针的角度
            secondPointer.style.transform = "translateX(-50%) rotate(" + second * 6 + "deg)";
            // 计算分钟针的角度
            minutePointer.style.transform = "translateX(-50%) rotate(" + minute * 6 + "deg)";
            // 计算小时针的角度
            hourPointer.style.transform = "translateX(-50%) rotate(" + hour * 30 + "deg)";
        },1000)
    </script>
</body>

</html>