jQuery-汉字时钟

使用jQuery写的案例

效果图

html代码部分

<!--创建时分秒容器-->
<div class="banner">
    <ul>
        <hr>
        <li class="year"></li>
        <!--秒容器-->
        <li class="seconds on"></li>
        <!--分容器-->
        <li class="minutes on"></li>
        <!--时容器-->
        <li class="hours on"></li>
    </ul>
</div>

css代码部分

    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .banner {
            width: 700px;
            height: 700px;
            margin: 20px auto;
            overflow: hidden;
        }

        hr {
            width: 340px;
            height: 1px;
            position: absolute;
            top: 350px;
            left: 350px;
            background-color: #000000;
        }

        ul {
            width: 100%;
            height: 100%;
            list-style: none;
            position: relative;
        }

        ul div {
            font-size: 14px;
            transition: transform linear .5s;
        }

        ul li {
            font-size: 14px;
        }

        .on {
            transition: transform linear .5s;
        }

        .year {
            width: 182px;
            height: 30px;
            line-height: 30px;
            position: absolute;
            font-size: 14px;
            margin: auto;
            left: 259px;
            top: 325px;
        }

        .seconds {
            width: 680px;
            height: 30px;
            position: absolute;
            top: 325px;
            left: 10px;
            transform-origin: 50% 50%;
        }

        .seconds_list {
            position: absolute;
            text-align: right;
            width: 680px;
            height: 30px;
            line-height: 28px;
        }

        .minutes {
            width: 520px;
            height: 30px;
            position: absolute;
            top: 325px;
            left: 90px;
            transform-origin: 50% 50%;
        }

        .minutes_list {
            position: absolute;
            text-align: right;
            width: 520px;
            height: 30px;
            line-height: 26px;
        }

        .hours {
            width: 350px;
            height: 30px;
            position: absolute;
            top: 325px;
            left: 175px;
            transform-origin: 50% 50%;
        }

        .hours_list {
            position: absolute;
            text-align: right;
            width: 350px;
            height: 30px;
            line-height: 24px;
        }
    </style>

jQuery代码部分

$(function () {
        //创建汉字数组
        var character = [
            "零",
            "一",
            "二",
            "三",
            "四",
            "五",
            "六",
            "七",
            "八",
            "九",
            "十",
            "　"
        ];


        //数字转换汉字的方法
        function transform(number, util) {
            var arr = [];
            for (var i = 1; i <= number; i++) {
                var temp = i.toString();
                var result = i <= 10 ? character[i] + character[11] + character[11] : temp.charAt(0) < 2 ? character[10] + character[11] + character[temp.charAt(1)]
                    : i % 10 === 0 ? character[temp.charAt(0)] + character[11] + character[10] : character[temp.charAt(0)] + character[10] + character[temp.charAt(1)];
                arr.push(result + util);
            }
            return arr;
        }

        //延迟时间方法
        function delay_time() {
            hours();
            setTimeout(function () {
                minutes();
            }, 400);
            setTimeout(function () {
                seconds();
            }, 800);
            setTimeout(function () {
                timeInit();
            }, 2200);
            setTimeout(function () {
                setInterval(function () {
                    timeRotate();
                }, 1000)
            }, 2500);
        }

        function seconds() {
            //秒布局
            var seconds = transform(60, "秒");
            seconds.forEach(function (value) {
                var temp = $("<div class='seconds_list'>" + value + "</div>");
                temp.appendTo($(".seconds"));
            });
            //秒动画
            $(".seconds_list").each(function (index) {
                var delay_time = 500 / 60 * index;
                $(this).delay(delay_time / 2).animate({
                    color: "#000"//让动画执行的方法
                }, function () {
                    $(this).css("transform", "rotatez(" + -index * 6 + "deg)");
                })
            });
        }

        function minutes() {
            //分布局
            var minutes = transform(60, "分");
            minutes.forEach(function (value) {
                var temp = $("<div class='minutes_list'>" + value + "</div>");
                temp.appendTo($(".minutes"));
            });
            //分动画
            $(".minutes_list").each(function (index) {
                var delay_time = 500 / 60 * index;
                $(this).delay(delay_time / 2).animate({
                    color: "#000"//让动画执行的方法
                }, function () {
                    $(this).css("transform", "rotatez(" + -index * 6 + "deg)");
                })
            });
        }

        function hours() {
            //时布局
            var hours = transform(24, "时");
            hours.forEach(function (value) {
                var temp = $("<div class='hours_list'>" + value + "</div>");
                temp.appendTo($(".hours"));
            });
            //时动画
            $(".hours_list").each(function (index) {
                var delay_time = 500 / 24 * index;
                $(this).delay(delay_time / 2).animate({
                    color: "#000"//让动画执行的方法
                }, function () {
                    $(this).css("transform", "rotatez(" + -index * 15 + "deg)");
                })
            });
        }

        var time = new Date();
        var year = time.getFullYear();
        var mouth = time.getMonth();
        var day = time.getDate();
        var tempYear = year.toString();
        var tempMouth = transform(mouth, "月");
        tempMouth = tempMouth[tempMouth.length - 1];
        var tempDay = transform(day, "日");
        tempDay = tempDay[tempDay.length - 1];
        var fullYear = character[tempYear.charAt(0)]
            + character[tempYear.charAt(1)]
            + character[tempYear.charAt(2)]
            + character[tempYear.charAt(3)] + "年"
            + tempMouth
            + tempDay;
        $(".year").html(fullYear);

        function timeInit() {
            var time = new Date();
            var seconds = time.getSeconds();
            var minutes = time.getMinutes();
            var hours = time.getHours();
            $(".seconds").css("transform", "rotate(" + (seconds - 1) * 6 + "deg)");
            $(".minutes").css("transform", "rotate(" + (minutes - 1) * 6 + "deg)");
            $(".hours").css("transform", "rotate(" + (hours - 1) * 15 + "deg)");
        }

        function timeRotate() {
            var time = new Date();
            var seconds = time.getSeconds();
            var minutes = time.getMinutes();
            var hours = time.getHours();
            $("li").addClass("on");

            $(".minutes").css("transform", "rotate(" + ((minutes == 0 ? 60 : minutes) - 1) * 6 + "deg)");
            $(".seconds").css("transform", "rotate(" + ((seconds == 0 ? 60 : seconds) - 1) * 6 + "deg)");
            $(".hours").css("transform", "rotate(" + (hours - 1) * 15 + "deg)");

            setTimeout(function () {
                if (seconds == 0) {
                    $(".seconds").removeClass("on").css("transform", "rotate(-6deg)");
                }
                if (minutes == 0) {
                    $(".minutes").removeClass("on").css("transform", "rotate(-6deg)");
                }
            }, 700);
        }

        delay_time();
    });

完整代码链接：https://download.csdn.net/my