jQuery---塔罗时钟-优快云博客

本文链接：https://blog.youkuaiyun.com/Null_Robot/article/details/107765610

本文详细介绍了一款使用HTML、CSS和jQuery实现的动态数字时钟。通过精美的布局和流畅的动画效果，该时钟能够实时显示当前时间，并采用中文数字进行小时、分钟和秒的标注。此外，还实现了日期的动态显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果图为
在这里插入图片描述
布局和书写样式

<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>

 <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>

用jquery实现动画效果


```javascript
<script src="js/jquery-1.9.1.js"></script>
<script>
    $(function () {
        var time = {
            0: "",
            1: "一",
            2: "二",
            3: "三",
            4: "四",
            5: "五",
            6: "六",
            7: "七",
            8: "八",
            9: "九",
            10: "十"
        };

        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.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.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.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>