纯css+js实现时钟动画

前言

之前搜索前端实现时钟没找到现成的，或者是只写一半，于是自己结合几个博客写了出来，还算有趣，分享一下。
因为隔得有点久，已经忘记当时看的博客，就不引用了，直接上代码（代码也有点乱，凑合看吧）

核心思路

• 设置以左侧中心为中心旋转元素transform-origin: left center;
• 设置旋转角度transform: rotate，比如指针有六十个，遍历设置角度时每次递增360/60=6deg
• 最后设置translate，让他们像坐火箭一样发射出去，就是要微调x轴y轴的偏移，这点比较麻烦
• 数字的话反向旋转来抵消发射时调整的角度，所以用span包裹

预览

代码

HTML

<!-- 时钟 -->
    <clock>
        <div class="clock">
            <div class="circle"></div>
            <ul class="min"></ul>
            <ul class="hour"></ul>
            <ul class="numbers"></ul>
            <ul class="pointer">
                <li class="p-hour"></li>
                <li class="p-min"></li>
                <li class="p-sec"></li>
            </ul>
        </div>
    </clock>

CSS

/* 表盘 */
        .clock {
            width: 200px;
            height: 200px;
            margin: 30px auto;
            border-radius: 100px;
            background-color: #292a38;
            position: relative;
        }

        .circle {
            position: absolute;
            top: 50%;
            left: 50%;
            background: white;
            width: 10px;
            height: 10px;
            border-radius: 5px;
            margin-top: -5px;
            margin-left: -5px;
        }

        /* 刻度 */
        li {
            list-style: none;
        }

        .hour li {
            position: absolute;
            width: 10px;
            height: 8px;
            left: 50%;
            top: 50%;
            background-color: #fff;
            transform-origin: left center;
            /* transform: translate(85px, -5px); */
        }
        .numbers li {
            position: absolute;
            left: 50%;
            top: 50%;
            color: #fff;
            transform-origin: left center;
            /* transform: translate(85px, -5px); */
        }
        .numbers li span{
            display: block;

        }
        .min li {
            position: absolute;
            width: 5px;
            height: 2px;
            left: 50%;
            top: 50%;
            background-color: #fff;
            transform-origin: left center;
            /* transform: translate(85px, -5px); */
        }

        /* 指针 */

        .p-hour {
            position: absolute;
            width: 45px;
            height: 3px;
            top: 50%;
            left: 50%;
            transform-origin: left center;
            background: #fff;
            margin-top: -2px;
        }

        .p-min {
            position: absolute;
            width: 60px;
            height: 2px;
            top: 50%;
            left: 50%;
            transform-origin: left center;
            background: #fff;
            margin-top: -2px;
        }

        .p-sec {
            position: absolute;
            width: 80px;
            height: 1px;
            top: 50%;
            left: 50%;
            transform-origin: left center;
            background: #fff;
            margin-top: -2px;
        }

JS

CreateHourLines();
    function CreateHourLines() {
        /* 绘制钟表的时钟刻度线 */
        var html = "";
        // key1表示x方向上的偏移量，key2表示y方向上的偏移量    
        var val, key1, key2;
        for (var i = 0; i < 12; i++) {
            val = i * 30;
            key1 = 88;
            key2 = 0;
            if (val > 180 && val < 360) {
                key1 = 90;
            }
            if (val > 0 && val < 180) {
                key1 = 85
            }
            if (val > 90 && val < 270) {
                key2 = 3;
            }
            if (val < 90 || val > 270) {
                key2 = -3;
            }
            html += "<li style='transform: rotate(" + val + "deg) translate(" + key1 + "px, " + key2 + "px)'></li>";
        }
        $(".hour").html(html);
    }
    //分钟
    CreateMinLines();
    function CreateMinLines() {
        /* 绘制钟表的时钟刻度线 */
        var html = "";
        // key1表示x方向上的偏移量，key2表示y方向上的偏移量    
        var val, key1, key2;
        for (var i = 0; i < 60; i++) {
            val = i * 6;
            key1 = 90;
            key2 = 0;
            html += "<li style='transform: rotate(" + val + "deg) translate(" + key1 + "px, " + key2 + "px)'></li>";
        }
        $(".min").html(html);
    }
    //数字
    CreateNumber();
    function CreateNumber() {
        /* 绘制钟表的时钟刻度线 */
        var html = "";
        // key1表示x方向上的偏移量，key2表示y方向上的偏移量    
        var val, key1, key2;
        for (var i = 0; i < 12; i++) {
            val = i * 30;
            key1 = 70;
            key2 = 0;
            if (val > 180 && val < 360) {
                key1 = 75;
            }
            if (val > 0 && val < 180) {
                key1 = 65
            }
            if (val > 90 && val < 270) {
                key2 = 3;
            }
            if (val < 90 || val > 270) {
                key2 = -3;
            }
            var num=i+3;//从3开始
            if(num>12){
                num=i-9;
            }
            html += "<li style='transform: rotate(" + val + "deg) translate(" + key1 + "px, " + key2 + "px)'><span style='transform: rotate(-" + val + "deg)'>" + num + "</span></li>";
        }
        $(".numbers").html(html);
    }

    move();
    function move() {
        setInterval(function () {
            // 获取当前时刻
            var date = new Date();
            var sec = date.getSeconds();
            var min = date.getMinutes();
            var hour = date.getHours();
            // 计算各指针对应的角度
            var secAngle = sec * 6 - 90; // s*6-90
            var minAngle = min * 6 + sec * 0.1 - 90; // m*6+s*0.1-90
            var hourAngle = hour * 30 + min * 0.5 - 90; // h*30+m*0.5 - 90
            // 转动指针
            $(".p-sec").css("transform", "rotate(" + secAngle + "deg)");
            $(".p-min").css("transform", "rotate(" + minAngle + "deg)");
            $(".p-hour").css("transform", "rotate(" + hourAngle + "deg)");
        }, 1000)
    }