用jQuery写塔罗时针_塔罗动画 jquery-CSDN博客

本文链接：https://blog.csdn.net/qq_43404042/article/details/107529427
案例：塔罗时针分享

效果图展示（代码运行后为一个同心转动展开的动画）：
在这里插入图片描述
思路分享:
先做时分秒的三个圆形框架，将时间放入框架中。首先获取时间，获取的时间为阿拉伯数字，需先将数字转换为汉字的时间，注意整十位的转换，再拼接时分秒。用dom动态获取将时间展示在框架中，再加入动画，需注意动画的运行时间，以及时分秒各转一整圈后的角度和位置。
完整代码如下：
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        html, body {
            width: 100%;
            height: 100%;
            overflow: hidden;
        }

        .box {
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            margin: auto;
            width: 500px;
            height: 500px;
            font-size: 12px;
        }

        .box > div {
            position: absolute;
            transform-origin: 50% 50%;
        }

        .trans {
            transition: transform .5s ease-in-out;
        }

        .seconds {
            left: 0;
            top: 0;
            width: 500px;
            height: 500px;
            border-radius: 50%;
        }

        .minute {
            left: 70px;
            top: 70px;
            width: 360px;
            height: 360px;
            border-radius: 50%;
        }

        .hour {
            left: 140px;
            top: 140px;
            width: 220px;
            height: 220px;
            border-radius: 50%;
        }

        .now {
            position: absolute;
            width: 110px;
            height: 30px;
            line-height: 30px;
            top: 235px;
            left: 195px;
            text-align: center;
        }

        .now:after {
            position: absolute;
            left: 0;
            bottom: 3px;
            content: "";
            width: 305px;
            height: 0;
            border-bottom: 1px solid #000;
        }

        .hour_list {
            position: absolute;
            top: 95px;
            left: 0;
            width: 220px;
            height: 30px;
            line-height: 30px;
            text-align: right;
            transform-origin: 50% 50%;
        }

        .minute_list {
            position: absolute;
            top: 165px;
            left: 0;
            width: 360px;
            height: 30px;
            line-height: 30px;
            text-align: right;
            transform-origin: 50% 50%;
        }

        .seconds_list {
            position: absolute;
            top: 235px;
            left: 0;
            width: 500px;
            height: 30px;
            line-height: 30px;
            text-align: right;
            transform-origin: 50% 50%;
        }

        .centerTime {
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            right: 0;
            margin: auto;
            font-size: 0;
        }
    </style>
</head>
<body>
<div class="box">
    <div class="seconds"></div>
    <div class="minute"></div>
    <div class="hour"></div>
    <p class="now">
        <span class="centerTime">2020年07月22日</span>
    </p>
</div>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
    $(function () {
        /*
         * 定义对象  作用  数字时间住转换汉字时间
         * */
        var time = {
            0: "",
            1: "一",
            2: "二",
            3: "三",
            4: "四",
            5: "五",
            6: "六",
            7: "七",
            8: "八",
            9: "九",
            10: "十"
        }
        //例如 秒  60
        function getHanTime(num, han) {
            var arr = [];
            for (var i = 1; i <= num; i++) {
                var s = i.toString();
                var text = i < 10 ? time[i] : s.charAt(0) < 2 ? time[10] + time[s.charAt(1)] : time[s.charAt(0)] + time[10] + time[s.charAt(1)];
                arr.push(text + han);
            }
            return arr;
        }

        //获取当前的年月日时分秒
        var arr = [];

        function getNowTime() {
            arr = [];
            var nowtime = new Date();
            var year = nowtime.getFullYear() + "年";
            var month = nowtime.getMonth() + 1 + "月";
            var day = nowtime.getDate() + "日";
            var centerTime = year + month + day;
            arr.push(centerTime);
            arr.push(nowtime.getHours());
            arr.push(nowtime.getMinutes());
            arr.push(nowtime.getSeconds());
        }

        //获取当前的时间
        getNowTime();
        $(".centerTime").text(arr[0]).animate({
            fontSize: 12
        }, 500);

        //获取小时汉字
        var hour = getHanTime(24, "时");
        //遍历hour数组动态产生标签
        hour.map(function (val, index) {
            var hourstr = $("<div class='hour_list'><span>" + val + "</span></div>");
            $(".hour").append(hourstr);
        });
        //给小时添加动画
        $(".hour_list").each(function (index) {
            var delaytime = 1000 / 24 * index
            $(this).delay(delaytime).animate({color: "#000"}, 500, function () {
                $(this).css("transform", "rotatez(" + (-index * 15) + "deg)");
            });
        });


        //获取分钟汉字
        var minute = getHanTime(60, "分");
        //遍历minute数组动态产生标签
        minute.map(function (val, index) {
            var minutestr = $("<div class='minute_list'><span>" + val + "</span></div>");
            $(".minute").append(minutestr);
        });
        //给分添加动画
        $(".minute_list").each(function (index) {
            var delaytime = 1000 / 60 * index
            $(this).delay(delaytime).animate({color: "#000"}, 500, function () {
                $(this).css("transform", "rotatez(" + (-index * 6) + "deg)");
            });
        });


        //获取秒汉字
        var seconds = getHanTime(60, "秒");
        //遍历seconds数组动态产生标签
        seconds.map(function (val, index) {
            var secondsstr = $("<div class='seconds_list'><span>" + val + "</span></div>");
            $(".seconds").append(secondsstr);
        });
        //给秒添加动画
        $(".seconds_list").each(function (index) {
            var delaytime = 1000 / 60 * index
            $(this).delay(delaytime).animate({color: "#000"}, 500, function () {
                $(this).css("transform", "rotatez(" + (-index * 6) + "deg)");
            });
        }).last().queue(function () {
            //时表盘转
            getNowTime();
            $(".box>div").addClass("trans");
            $(".hour").animate({color: "#000"}, 0, function () {
                $(this).css("transform", "rotatez(" + ((arr[1] - 1) / 24 * 360) + "deg)");
            });
            $(".minute").delay(100).animate({color: "#000"}, 0, function () {
                $(this).css("transform", "rotatez(" + ((arr[2] - 1) / 60 * 360) + "deg)");
            })
            $(".seconds").delay(200).animate({color: "#000"}, 0, function () {
                $(this).css("transform", "rotatez(" + ((arr[3] - 1) / 60 * 360) + "deg)");
                setAnimate();//开启自动旋转
            })
        });

        //自动旋转的动画
        function setAnimate() {
            $(".seconds").animate({
                color: "#000"
            }, 1000, function () {
                //获取当前的时间
                getNowTime();
                if (arr[1] == 1) {
                    $(".hour").removeClass("trans").css("transform", "rotatez(-15deg)");
                }
                $(".box>div").addClass("trans");
                $(".hour").css("transform", "rotatez(" + ((arr[1] - 1) / 24 * 360) + "deg)");
                $(".minute").css("transform", "rotatez(" + (((arr[2] == 0 ? 60 : arr[2]) - 1) / 60 * 360) + "deg)");
                $(".seconds").css("transform", "rotatez(" + (((arr[3] == 0 ? 60 : arr[3]) - 1) / 60 * 360) + "deg)");

                setTimeout(function () {
                    //过度动画执行完成
                    if (arr[3] == 0) {
                        $(".seconds").removeClass("trans").css("transform", "rotatez(-6deg)");
                    }
                    if (arr[2] == 0&&arr[3]==0) {
                        $(".minute").removeClass("trans").css("transform", "rotatez(-6deg)");
                    }
                }, 500);

            }).queue(function () {
                $(this).dequeue();
                setAnimate();
            });
        }


    });
</script>
</body>
</html>