罗马时钟代码 jquery

罗马时钟代码


最近非常流行的罗马时钟,今天Ta来了!!!

先来看一张效果图

在这里插入图片描述

下载链接:罗马时钟代码

抖音上面都是一行代码写出一片天地,今天咱们来看看他的“一行代码” 。话不多说,直接开干。。。。

index.html

<!doctype html>
<meta charset=utf-8>
<meta content="IE=edge" http-equiv=X-UA-Compatible><title>动态时钟</title>
<meta content="width=device-width,initial-scale=1" name=viewport>
<script src=js/jquery-3.4.1.min.js></script>
<script src=js/test.js></script>
<script src=js/common.js></script>
<script src=js/config.js></script>
<style>* {
  margin: 0;
  padding: 0
}

body {
  background-attachment: fixed;
  color: #f5f4f6;
  font-size: 12px;
  font-weight: 700;
  overflow: hidden;
  width: 1000px;
  height: 900px;
  font-family: "微软雅黑"
}

audio {
  position: absolute;
  right: 0;
  opacity: .1;
  transition: all 1s
}

audio:hover {
  opacity: 1
}

.current {
  color: #d1a3f7
}

video {
  z-index: -1;
  position: fixed;
  min-width: 100%;
  min-height: 100%
}

.main-content {
  position: absolute;
  top: 50%;
  left: 50%
}

.main-content .year {
  position: relative;
  top: -13px;
  left: -38px;
  text-align: center
}

.main-content .year span {
  position: absolute;
  width: 80px
}

.main-content .month {
  position: relative;
  top: -13px;
  left: 40px
}

.month span {
  position: absolute;
  width: 60px
}

.main-content .day {
  position: relative;
  top: -13px;
  left: 85px
}

.day span {
  position: absolute;
  width: 65px
}

.main-content .week {
  position: relative;
  top: -13px;
  left: 145px
}

.week span {
  position: absolute;
  width: 65px
}

.main-content .shichen {
  position: relative;
  top: -13px;
  left: 200px
}

.shichen span {
  position: absolute;
  width: 125px
}

.main-content .hour {
  position: relative;
  top: -13px;
  left: 240px
}

.hour span {
  position: absolute;
  width: 60px
}

.main-content .minute {
  position: relative;
  top: -13px;
  left: 300px
}

.minute span {
  position: absolute;
  width: 60px
}

.main-content .second {
  position: relative;
  top: -13px;
  left: 370px
}

.second span {
  position: absolute;
  width: 60px
}</style>
<div class=main-content>
  <div class=year></div>
  <div class=month></div>
  <div class=day></div>
  <div class=week></div>
  <div class=shichen></div>
  <div class=hour></div>
  <div class=minute></div>
  <div class=second></div>
</div>

js/config.js

var config={
 	'language_type':2,
    'font_color':'green',
    'pointer_color':'red',
}

js/common.js

	function numToSimp(e) {
    var r = "",
        n = parseInt(e % 10),
        s = parseInt(e / 10),
        t = "零一二三四五六七八九十";
    return s > 1 && (r = t.charAt(s)), 0 != s && (r += "十"), 0 != n && (r += t.charAt(n)), 0 == s && 0 == n && (r = t[0]),
        r
}

function numToTrad(e) {
    var r = "",
        n = parseInt(e % 10),
        s = parseInt(e / 10),
        t = "零一二三四五六七八九";
    return s > 1 && (r = t.charAt(s)), 0 != s && (r += "十"), 0 != n && (r += t.charAt(n)), 0 == s && 0 == n && (r = t[0]),
        r
}

function numToEng(e) {
    var r = "",
        n = parseInt(e % 10),
        s = parseInt(e / 10),
        t = [["zero", "one", "two", "three", "four", "five", "six", "seven", "eight", "nine", "ten", "eleven", "twelve",
            "thirteen", "fourteen", "fifteen", "sixteen", "seventeen", "eighteen", "nineteen"], ["twenty", "thirty",
            "forty", "fifty", "sixty", "seventy", "eighty", "ninety"]];
    return e < 20 ? r = t[0][e] : (r = t[1][s - 2], 0 != n && (r += t[0][n])), 0 == s && 0 == n && (r = t[0][0]), r
}

function isLeapYear(e) {
    return e % 4 == 0 && e % 100 != 0 || e % 400 == 0
}

function getYear(e, r) {
    var n = "",
        s = parseInt(r / 1 % 10),
        t = parseInt(r / 10 % 10),
        a = parseInt(r / 100 % 10),
        o = parseInt(r / 1e3 % 10);
    switch (e) {
        case 0:
        case 3:
            n = r;
            break;
        case 1:
            n = numToSimp(o) + numToSimp(a) + numToSimp(t) + numToSimp(s);
            break;
        case 2:
            n = numToTrad(o) + numToTrad(a) + numToTrad(t) + numToTrad(s)
    }
    return n
}

function getMonths(e, r) {
    var n = new Array,
        s = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
        t = 1;
    switch (e) {
        case 0:
            for (t = r; t <= 12; t++) n.push(t);
            for (t = 1; t < r; t++) n.push(t);
            break;
        case 1:
            for (t = r; t <= 12; t++) n.push(numToSimp(t));
            for (t = 1; t < r; t++) n.push(numToSimp(t));
            break;
        case 2:
            for (t = r; t <= 12; t++) n.push(numToTrad(t));
            for (t = 1; t < r; t++) n.push(numToTrad(t));
            break;
        case 3:
            for (t = r - 1; t < 12; t++) n.push(s[t]);
            for (t = 0; t < r - 1; t++) n.push(s[t])
    }
    return n
}

function getdays(e, r, n, s) {
    var t = new Array,
        a = 1,
        o = isLeapYear(r);
    switch (e) {
        case 0:
        case 3:
            for (a = s; a <= 31 && (t.push(a), 2 != n || !o || 29 != a) && (2 != n || o || 28 != a) && (2 != n && 4 !=
                    n && 6 != n && 9 != n && 11 != n || 30 != a); a++);
            for (a = 1; a < s; a++) t.push(a);
            break;
        case 1:
            for (a = s; a <= 31 && (t.push(numToSimp(a)), 2 != n || !o || 29 != a) && (2 != n || o || 28 != a) && (2 !=
                    n && 4 != n && 6 != n && 9 != n && 11 != n || 30 != a); a++);
            for (a = 1; a < s; a++) t.push(numToSimp(a));
            break;
        case 2:
            for (a = s; a <= 31 && (t.push(numToTrad(a)), 2 != n || !o || 29 != a) && (2 != n || o || 28 != a) && (2 !=
                    n && 4 != n && 6 != n && 9 != n && 11 != n || 30 != a); a++);
            for (a = 1; a < s; a++) t.push(numToTrad(a))
    }
    return t
}

function getShiChen(e, r) {
    var n = {
        index: 0,
        str: ""
    };
    switch (e) {
        case 0:
            r >= 23 || r < 1 ? (n.index = 0, n.str = "23:00-1:00") : r >= 1 && r < 3 ? (n.index = 1, n.str =
                    "1:00-3:00") : r >= 3 && r < 5 ? (n.index = 2, n.str = "3:00-5:00") : r >= 5 && r < 7 ? (n.index =
                    3, n.str = "5:00-7:00") : r >= 7 && r < 9 ? (n.index = 4, n.str = "7:00-9:00") : r >= 9 && r < 11 ?
                (n.index = 5, n.str = "9:00-11:00") : r >= 11 && r < 13 ? (n.index = 6, n.str = "11:00-13:00") : r >=
                13 && r < 15 ? (n.index = 7, n.str = "13:00-15:00") : r >= 15 && r < 17 ? (n.index = 8, n.str =
                    "15:00-17:00") : r >= 17 && r < 19 ? (n.index = 9, n.str = "17:00-19:00") : r >= 19 && r < 21 ? (n.index =
                    10, n.str = "19:00-21:00") : r >= 21 && r < 23 && (n.index = 11, n.str = "21:00-23:00");
            break;
        case 1:
        case 2:
            r >= 23 || r < 1 ? (n.index = 0, n.str = "子时") : r >= 1 && r < 3 ? (n.index = 1, n.str = "丑时") : r >= 3 &&
                r < 5 ? (n.index = 2, n.str = "寅时") : r >= 5 && r < 7 ? (n.index = 3, n.str = "卯时") : r >= 7 && r < 9 ?
                (n.index = 4, n.str = "辰时") : r >= 9 && r < 11 ? (n.index = 5, n.str = "巳时") : r >= 11 && r < 13 ? (n.index =
                    6, n.str = "午时") : r >= 13 && r < 15 ? (n.index = 7, n.str = "未时") : r >= 15 && r < 17 ? (n.index =
                    8, n.str = "申时") : r >= 17 && r < 19 ? (n.index = 9, n.str = "酉时") : r >= 19 && r < 21 ? (n.index =
                    10, n.str = "戌时") : r >= 21 && r < 23 && (n.index = 11, n.str = "亥时");
            break;
        case 3:
            r >= 23 || r < 1 ? (n.index = 0, n.str = "23pm to 1am") : r >= 1 && r < 3 ? (n.index = 1, n.str =
                    "1am to 3am") : r >= 3 && r < 5 ? (n.index = 2, n.str = "3am to 5am") : r >= 5 && r < 7 ? (n.index =
                    3, n.str = "5pm to 7am") : r >= 7 && r < 9 ? (n.index = 4, n.str = "7pm to 9am") : r >= 9 && r < 11 ?
                (n.index = 5, n.str = "9pm to 11am") : r >= 11 && r < 13 ? (n.index = 6, n.str = "11am to 13pm") : r >=
                13 && r < 15 ? (n.index = 7, n.str = "13pm to 15pm") : r >= 15 && r < 17 ? (n.index = 8, n.str =
                    "15pm to 17pm") : r >= 17 && r < 19 ? (n.index = 9, n.str = "17pm to 19pm") : r >= 19 && r < 21 ? (
                    n.index = 10, n.str = "19pm to 21pm") : r >= 21 && r < 23 && (n.index = 11, n.str = "21pm to 23pm")
    }
    return n
}

function getShiChens(e, r) {
    var n = new Array,
        s = 0,
        t = ["23:00-1:00", "1:00-3:00", "3:00-5:00", "5:00-7:00", "7:00-9:00", "9:00-11:00", "11:00-13:00",
            "13:00-15:00", "15:00-17:00", "17:00-19:00", "19:00-21:00", "21:00-23:00"],
        a = ["子时", "丑时", "寅时", "卯时", "辰时", "巳时", "午时", "未时", "申时", "酉时", "戌时", "亥时"],
        o = ["23pm to 1am", "1am to 3am", "3am to 5am", "5pm to 7am", "7pm to 9am", "9pm to 11am", "11am to 13pm",
            "13pm to 15pm", "15pm to 17pm", "17pm to 19pm", "19pm to 21pm", "21pm to 23pm"];
    switch (e) {
        case 0:
            for (s = r.index; s < 12; s++) n.push(t[s]);
            for (s = 0; s < r.index; s++) n.push(t[s]);
            break;
        case 1:
        case 2:
            for (s = r.index; s < 12; s++) n.push(a[s]);
            for (s = 0; s < r.index; s++) n.push(a[s]);
            break;
        case 3:
            for (s = r.index; s < 12; s++) n.push(o[s]);
            for (s = 0; s < r.index; s++) n.push(o[s])
    }
    return n
}

function getMonthEng(e) {
    return ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"][e - 1]
}

function getWeeks(e, r) {
    weeks = [], weeksEng = ["Sun", "Mon", "Tues", "Wed", "Thur", "Fri", "Sat"];
    var n = 0;
    switch (e) {
        case 0:
        case 1:
        case 2:
            for (n = r; n < 7; n++) weeks[n] = "星期" + numToSimp(n), 0 == n && (weeks[n] = "星期日");
            for (n = 0; n < r; n++) weeks[n] = "星期" + numToSimp(n);
            break;
        case 3:
            for (n = r; n < 7; n++) weeks.push(weeksEng[n]);
            for (n = 0; n < r; n++) weeks.push(weeksEng[n])
    }
    return weeks
}

function getWeek(e, r) {
    switch (weekEng = ["Sun", "Mon", "Tues", "Wed", "Thur", "Fri", "Sat"], res = "", e) {
        case 0:
        case 1:
        case 2:
            res = 0 == r ? "日" : numToSimp(r);
            break;
        case 3:
            res = weekEng[r]
    }
    return res
}

function getHours(e, r) {
    var n = new Array,
        s = 0;
    switch (e) {
        case 0:
        case 3:
            for (s = r; s < 24; s++) n.push(s);
            for (s = 0; s < r; s++) n.push(s);
            break;
        case 1:
            for (s = r; s < 24; s++) n.push(numToSimp(s));
            for (s = 0; s < r; s++) n.push(numToSimp(s));
            break;
        case 2:
            for (s = r; s < 24; s++) n.push(numToTrad(s));
            for (s = 0; s < r; s++) n.push(numToTrad(s))
    }
    return n
}

function getMinutes(e, r) {
    var n = new Array,
        s = 0;
    switch (e) {
        case 0:
        case 3:
            for (s = r; s < 60; s++) n.push(s);
            for (s = 0; s < r; s++) n.push(s);
            break;
        case 1:
            for (s = r; s < 60; s++) n.push(numToSimp(s));
            for (s = 0; s < r; s++) n.push(numToSimp(s));
            break;
        case 2:
            for (s = r; s < 60; s++) n.push(numToTrad(s));
            for (s = 0; s < r; s++) n.push(numToTrad(s))
    }
    return n
}

function getSeconds(e, r) {
    var n = new Array,
        s = 0;
    switch (e) {
        case 0:
        case 3:
            for (s = r; s < 60; s++) n.push(s);
            for (s = 0; s < r; s++) n.push(s);
            break;
        case 1:
            for (s = r; s < 60; s++) n.push(numToSimp(s));
            for (s = 0; s < r; s++) n.push(numToSimp(s));
            break;
        case 2:
            for (s = r; s < 60; s++) n.push(numToTrad(s));
            for (s = 0; s < r; s++) n.push(numToTrad(s))
    }
    return n
}

function isShichen(e) {
    return "one h" == e || "three h" == e || "five h" == e || "seven h" == e || "nine h" == e || "eleven h" == e ||
        "thirteen h" == e || "fifteen h" == e || "seventeen h" == e || "nineteen h" == e || "twentyone h" == e ||
        "twentythree h" == e || "1时" == e || "3时" == e || "5时" == e || "7时" == e || "9时" == e || "11时" == e || "13时" ==
        e || "15时" == e || "17时" == e || "19时" == e || "21时" == e || "23时" == e || "一时" == e || "三时" == e || "五时" == e ||
        "七时" == e || "九时" == e || "十一时" == e || "十三时" == e || "十五时" == e || "十七时" == e || "十九时" == e || "二十一时" == e ||
        "二十三时" == e || "壹时" == e || "叁时" == e || "伍时" == e || "柒时" == e || "玖时" == e || "拾壹时" == e || "拾叁时" == e ||
        "拾伍时" == e || "拾柒时" == e || "拾玖时" == e || "贰拾壹时" == e || "贰拾叁时" == e || "1 h" == e || "3 h" == e || "5 h" == e ||
        "7 h" == e || "9 h" == e || "11 h" == e || "13 h" == e || "15 h" == e || "17 h" == e || "19 h" == e || "21 h" ==
        e || "23 h" == e
}

function updateDays(e, r, n, s) {
    var t = new Array,
        a = 1,
        o = isLeapYear(r);
    switch (e) {
        case 0:
        case 3:
            for (a = s; a <= 31 && (t.push(a), 2 != n || !o || 29 != a) && (2 != n || o || 28 != a) && (2 != n && 4 !=
                    n && 6 != n && 9 != n && 11 != n || 30 != a); a++);
            for (a = 1; a < s; a++) t.push(a);
            break;
        case 1:
            for (a = 1; a <= 31 && (t.push(numToSimp(a)), 2 != n || !o || 29 != a) && (2 != n || o || 28 != a) && (2 !=
                    n && 4 != n && 6 != n && 9 != n && 11 != n || 30 != a); a++);
            for (a = 1; a < s; a++) t.push(numToSimp(a));
            break;
        case 2:
            for (a = 1; a <= 31 && (t.push(numToTrad(a)), 2 != n || !o || 29 != a) && (2 != n || o || 28 != a) && (2 !=
                    n && 4 != n && 6 != n && 9 != n && 11 != n || 30 != a); a++);
            for (a = 1; a < s; a++) t.push(numToTrad(a))
    }
    return t
}

function getFirstDay(e) {
    switch (day = 1, e) {
        case 1:
            day = numToSimp(day);
            break;
        case 2:
            day = numToTrad(day)
    }
    return day
}

js/test.js

function initTime(n, e) {
    switch (e) {
        case 0:
            n.months = getMonths(0, n.currentTime.month), n.days = getdays(0, n.currentTime.year, n.currentTime.month,
                    n.currentTime.day), n.weeks = getWeeks(0, n.currentTime.week), n.hours = getHours(0, n.currentTime.hour),
                n.minutes = getMinutes(0, n.currentTime.minute), n.seconds = getSeconds(0, n.currentTime.second), n.currentTime
                .week = n.weekUnit + getWeek(0, n.currentTime.week), n.currentTime.shichen = getShiChen(0, n.currentTime
                    .hour), n.shichens = getShiChens(0, n.currentTime.shichen);
            break;
        case 1:
            n.months = getMonths(1, n.currentTime.month), n.days = getdays(1, n.currentTime.year, n.currentTime.month,
                    n.currentTime.day), n.weeks = getWeeks(1, n.currentTime.week), n.hours = getHours(1, n.currentTime.hour),
                n.minutes = getMinutes(1, n.currentTime.minute), n.seconds = getSeconds(1, n.currentTime.second), n.currentTime
                .month = numToSimp(n.currentTime.month), n.currentTime.day = numToSimp(n.currentTime.day), n.currentTime
                .week = n.weekUnit + getWeek(1, n.currentTime.week), n.currentTime.shichen = getShiChen(1, n.currentTime
                    .hour), n.shichens = getShiChens(1, n.currentTime.shichen), n.currentTime.hour = numToSimp(n.currentTime
                    .hour), n.currentTime.minute = numToSimp(n.currentTime.minute), n.currentTime.second = numToSimp(n.currentTime
                    .second), n.currentTime.year = getYear(1, n.currentTime.year);
            break;
        case 2:
            n.months = getMonths(2, n.currentTime.month), n.days = getdays(2, n.currentTime.year, n.currentTime.month,
                    n.currentTime.day), n.weeks = getWeeks(2, n.currentTime.week), n.hours = getHours(2, n.currentTime.hour),
                n.minutes = getMinutes(2, n.currentTime.minute), n.seconds = getSeconds(2, n.currentTime.second), n.currentTime
                .month = numToTrad(n.currentTime.month), n.currentTime.day = numToTrad(n.currentTime.day), n.currentTime
                .week = n.weekUnit + getWeek(2, n.currentTime.week), n.currentTime.shichen = getShiChen(2, n.currentTime
                    .hour), n.shichens = getShiChens(2, n.currentTime.shichen), n.currentTime.hour = numToTrad(n.currentTime
                    .hour), n.currentTime.minute = numToTrad(n.currentTime.minute), n.currentTime.second = numToTrad(n.currentTime
                    .second), n.currentTime.year = getYear(2, n.currentTime.year);
            break;
        case 3:
            n.months = getMonths(3, n.currentTime.month), n.days = getdays(0, n.currentTime.year, n.currentTime.month,
                    n.currentTime.day), n.weeks = getWeeks(3, n.currentTime.week), n.hours = getHours(3, n.currentTime.hour),
                n.minutes = getMinutes(3, n.currentTime.minute), n.seconds = getSeconds(3, n.currentTime.second), n.currentTime
                .month = getMonthEng(n.currentTime.month), n.currentTime.week = getWeek(3, n.currentTime.week), n.currentTime
                .shichen = getShiChen(3, n.currentTime.hour), n.shichens = getShiChens(3, n.currentTime.shichen), n.monthUnit =
                "", n.dayUnit = " day", n.weekUnit = "", n.hourUnit = " h", n.minuteUnit = " m", n.secondUnit = " s", n
                .yearUnit = " Year"
    }
}

function getSpace(n, e) {
    switch (space = {
        month: 0,
        day: 0,
        week: 0,
        shichen: 0,
        hour: 0,
        minute: 0,
        second: 0
    }, e) {
        case 0:
            space.month = 30, space.day = 65, space.week = 100, space.shichen = 150, space.hour = 230, space.minute =
                270, space.second = 310;
            break;
        case 1:
            space.month = 40, space.day = 85, space.week = 145, space.shichen = 192, space.hour = 232, space.minute =
                292, space.second = 355;
            break;
        case 2:
            space.month = 40, space.day = 85, space.week = 145, space.shichen = 190, space.hour = 230, space.minute =
                290, space.second = 350;
            break;
        case 3:
            space.month = 40, space.day = 75, space.week = 125, space.shichen = 160, space.hour = 255, space.minute =
                295, space.second = 335
    }
    return space
}
$(document).ready(function () {
    var n = document.styleSheets[0];
    if (type = config.language_type, space = getSpace(12, type), $(".main-content .month").css("left", space.month +
            "px"), $(".main-content .day").css("left", space.day + "px"), $(".main-content .week").css("left",
            space.week + "px"), $(".main-content .shichen").css("left", space.shichen + "px"), $(
            ".main-content .hour").css("left", space.hour + "px"), $(".main-content .minute").css("left", space
            .minute + "px"), $(".main-content .second").css("left", space.second + "px"), $("body").css("color",
            config.font_color), n.cssRules[4].style.color = config.pointer_color, config.sound) {
        var e = "<audio controls loop autoplay><source src='sound/" + config.sound_name + "'></audio>";
        $("body").append(e)
    }
    switch (config.background_style) {
        case 0:
            var t = "url('images/" + config.background_picture + "') fixed no-repeat";
            $("body").css("background", t), $("body").css("background-size", "100% 100%");
            break;
        case 1:
            $("body").append('<video loop autoplay muted><source src="video/' + config.background_video +
                '"></video>');
            break;
        case 2:
            $("body").css("background", config.background_color)
    }
    var r = $(".main-content .month").css("left"),
        s = $(".main-content .day").css("left"),
        a = $(".main-content .week").css("left"),
        i = $(".main-content .shichen").css("left"),
        o = $(".main-content .hour").css("left"),
        c = $(".main-content .minute").css("left"),
        m = $(".main-content .second").css("left"),
        u = $(".main-content .month").css("top"),
        h = $(".main-content .year span").width() / 2,
        d = {
            currentTime: {
                year: 1949,
                month: 10,
                day: 1,
                hour: 0,
                minute: 0,
                second: 0,
                week: 0,
                shichen: {}
            },
            months: [],
            days: [],
            hours: [],
            minutes: [],
            seconds: [],
            shichens: [],
            weeks: [],
            hours: [],
            minutes: [],
            seconds: [],
            yearUnit: "年",
            monthUnit: "月",
            dayUnit: "日",
            weekUnit: "星期",
            hourUnit: "时",
            minuteUnit: "分",
            secondUnit: "秒"
        },
        f = d.currentTime.month,
        p = d.currentTime.year;
    initTime(d, type), $(".main-content .year").append("<span class='current'>" + d.currentTime.year + d.yearUnit +
        "</span>");
    var l = $(".year span").height();
    u = -parseInt(u) - parseInt(l) / 2, u += "px", $(".main-content .month").append("<span class='current'>" +
            d.currentTime.month + d.monthUnit + "</span>"), $(".main-content .day").append(
            "<span class='current'>" + d.currentTime.day + d.dayUnit + "</span>"), $(".main-content .week").append(
            "<span class='current'>" + d.currentTime.week + "</span>"), $(".main-content .shichen").append(
            "<span class='current'>" + d.currentTime.shichen.str + "</span>"), $(".main-content .hour").append(
            "<span class='current'>" + d.currentTime.hour + d.hourUnit + "</span>"), $(".main-content .minute")
        .append("<span class='current'>" + d.currentTime.minute + d.minuteUnit + "</span>"), $(
            ".main-content .second").append("<span class='current'>" + d.currentTime.second + d.secondUnit +
            "</span>");
    for (const n in d.months)
        if (d.months.hasOwnProperty(n)) {
            const e = d.months[n];
            e != d.currentTime.month && $(".main-content .month").append("<span>" + e + d.monthUnit + "</span>")
        } for (const n in d.days)
        if (d.days.hasOwnProperty(n)) {
            const e = d.days[n];
            e != d.currentTime.day && $(".main-content .day").append("<span>" + e + d.dayUnit + "</span>")
        } for (const n in d.weeks)
        if (d.weeks.hasOwnProperty(n)) {
            const e = d.weeks[n];
            e != d.currentTime.week && $(".main-content .week").append("<span>" + e + "</span>")
        } for (const n in d.shichens)
        if (d.shichens.hasOwnProperty(n)) {
            const e = d.shichens[n];
            e != d.currentTime.shichen.str && $(".main-content .shichen").append("<span>" + e + "</span>")
        } for (const n in d.hours)
        if (d.hours.hasOwnProperty(n)) {
            const e = d.hours[n];
            e != d.currentTime.hour && $(".main-content .hour").append("<span>" + e + d.hourUnit + "</span>")
        } for (const n in d.minutes)
        if (d.minutes.hasOwnProperty(n)) {
            const e = d.minutes[n];
            e != d.currentTime.minute && $(".main-content .minute").append("<span>" + e + d.minuteUnit +
                "</span>")
        } for (const n in d.seconds)
        if (d.seconds.hasOwnProperty(n)) {
            const e = d.seconds[n];
            e != d.currentTime.second && $(".main-content .second").append("<span>" + e + d.secondUnit +
                "</span>")
        } setTimeout(function () {
        $(".month span").each(function (e, t) {
            $(t).css("animation", "month" + e + " 1s linear"), $(t).css("animation-fill-mode",
                "forwards"), n.insertRule("@keyframes month" + e +
                "{0%{transform: rotateZ(0);transform-origin: -" + r + " " + u +
                ";}100%{transform:rotateZ(" + -360 / 12 * e + "deg);transform-origin: -" +
                r + " " + u + ";}}", n.rules.length)
        })
    }, 0), setTimeout(function () {
        $(".day span").each(function (e, t) {
            $(t).css("animation", "day" + e + " 1s linear"), $(t).css("animation-fill-mode",
                "forwards"), n.insertRule("@keyframes day" + e +
                "{0%{transform: rotateZ(0);transform-origin: -" + s + " " + u +
                ";}100%{transform:rotateZ(" + -360 / d.days.length * e +
                "deg);transform-origin: -" + s + " " + u + ";}}", n.rules.length)
        })
    }, 1e3), setTimeout(function () {
        $(".week span").each(function (e, t) {
            $(t).css("animation", "week" + e + " 1s linear"), $(t).css("animation-fill-mode",
                "forwards"), n.insertRule("@keyframes week" + e +
                "{0%{transform: rotateZ(0);transform-origin: -" + a + " " + u +
                ";}100%{transform:rotateZ(" + -360 / d.weeks.length * e +
                "deg);transform-origin: -" + a + " " + u + ";}}", n.rules.length)
        })
    }, 2e3), setTimeout(function () {
        $(".shichen span").each(function (e, t) {
            $(t).css("animation", "shichen" + e + " 1s linear"), $(t).css("animation-fill-mode",
                "forwards"), n.insertRule("@keyframes shichen" + e +
                "{0%{transform: rotateZ(0);transform-origin: -" + i + " " + u +
                ";}100%{transform:rotateZ(" + -360 / d.shichens.length * e +
                "deg);transform-origin: -" + i + " " + u + ";}}", n.rules.length)
        })
    }, 3e3), setTimeout(function () {
        $(".hour span").each(function (e, t) {
            $(t).css("animation", "hour" + e + " 1s linear"), $(t).css("animation-fill-mode",
                "forwards"), n.insertRule("@keyframes hour" + e +
                "{0%{transform: rotateZ(0);transform-origin: -" + o + " " + u +
                ";}100%{transform:rotateZ(" + -360 / d.hours.length * e +
                "deg);transform-origin: -" + o + " " + u + ";}}", n.rules.length)
        })
    }, 4e3), setTimeout(function () {
        $(".minute span").each(function (e, t) {
            $(t).css("animation", "minute" + e + " 1s linear"), $(t).css("animation-fill-mode",
                "forwards"), n.insertRule("@keyframes minute" + e +
                "{0%{transform: rotateZ(0);transform-origin: -" + c + " " + u +
                ";}100%{transform:rotateZ(" + -360 / d.minutes.length * e +
                "deg);transform-origin: -" + c + " " + u + ";}}", n.rules.length)
        })
    }, 5e3), setTimeout(function () {
        $(".second span").each(function (e, t) {
            $(t).css("animation", "second" + e + " 1s linear"), $(t).css("animation-fill-mode",
                "forwards"), n.insertRule("@keyframes second" + e +
                "{0%{transform: rotateZ(0);transform-origin: -" + m + " " + u +
                ";}100%{transform:rotateZ(" + -360 / d.seconds.length * e +
                "deg);transform-origin: -" + m + " " + u + ";}}", n.rules.length)
        })
    }, 6e3), setTimeout(function () {
        $(".year span").css("animation", "yearRun 1s linear infinite"), n.insertRule(
            "@keyframes yearRun {0%{transform: rotateZ(0);transform-origin: -" + h + " " + u +
            ";}100%{transform:rotateZ(720deg);transform-origin: -" + h + " " + u + ";}}", n.rules.length
        ), $($(".main-content .second span")[0]).removeClass("current"), $(".second span").each(
            function (e, t) {
                $(t).css("animation", "secondRun" + e + " 1s linear infinite"), n.insertRule(
                    "@keyframes secondRun" + e +
                    " {0%{transform: rotateZ(0);transform-origin: -" + m + " " + u +
                    ";}100%{transform:rotateZ(" + 720 * (e + 1) + "deg);transform-origin: -" +
                    m + " " + u + ";}}", n.rules.length)
            }), $($(".main-content .minute span")[0]).removeClass("current"), $(".minute span").each(
            function (e, t) {
                $(t).css("animation", "minuteRun" + e + " 1s linear infinite"), n.insertRule(
                    "@keyframes minuteRun" + e +
                    " {0%{transform: rotateZ(0);transform-origin: -" + c + " " + u +
                    ";}100%{transform:rotateZ(" + 720 * (e + 1) + "deg);transform-origin: -" +
                    c + " " + u + ";}}", n.rules.length)
            }), $($(".main-content .hour span")[0]).removeClass("current"), $(".hour span").each(
            function (e, t) {
                $(t).css("animation", "hourRun" + e + " 1s linear infinite"), n.insertRule(
                    "@keyframes hourRun" + e + " {0%{transform: rotateZ(0);transform-origin: -" +
                    o + " " + u + ";}100%{transform:rotateZ(" + 720 * (e + 1) +
                    "deg);transform-origin: -" + o + " " + u + ";}}", n.rules.length)
            }), $($(".main-content .shichen span")[0]).removeClass("current"), $(".shichen span").each(
            function (e, t) {
                $(t).css("animation", "shichenRun" + e + " 1s linear infinite"), n.insertRule(
                    "@keyframes shichenRun" + e +
                    " {0%{transform: rotateZ(0);transform-origin: -" + i + " " + u +
                    ";}100%{transform:rotateZ(" + 720 * (e + 1) + "deg);transform-origin: -" +
                    i + " " + u + ";}}", n.rules.length)
            }), $($(".main-content .week span")[0]).removeClass("current"), $(".week span").each(
            function (e, t) {
                $(t).css("animation", "weekRun" + e + " 1s linear infinite"), n.insertRule(
                    "@keyframes weekRun" + e + " {0%{transform: rotateZ(0);transform-origin: -" +
                    a + " " + u + ";}100%{transform:rotateZ(" + 720 * (e + 1) +
                    "deg);transform-origin: -" + a + " " + u + ";}}", n.rules.length)
            }), $($(".main-content .day span")[0]).removeClass("current"), $(".day span").each(
            function (e, t) {
                $(t).css("animation", "dayRun" + e + " 1s linear infinite"), n.insertRule(
                    "@keyframes dayRun" + e + " {0%{transform: rotateZ(0);transform-origin: -" +
                    s + " " + u + ";}100%{transform:rotateZ(" + 720 * (e + 1) +
                    "deg);transform-origin: -" + s + " " + u + ";}}", n.rules.length)
            }), $($(".main-content .month span")[0]).removeClass("current"), $(".month span").each(
            function (e, t) {
                $(t).css("animation", "monthRun" + e + " 1s linear infinite"), n.insertRule(
                    "@keyframes monthRun" + e +
                    " {0%{transform: rotateZ(0);transform-origin: -" + r + " " + u +
                    ";}100%{transform:rotateZ(" + 720 * (e + 1) + "deg);transform-origin: -" +
                    r + " " + u + ";}}", n.rules.length)
            })
    }, 7e3), setTimeout(function () {
        var n = new Date;
        d.currentTime.year = n.getFullYear(), d.currentTime.month = n.getMonth() + 1, d.currentTime.day =
            n.getDate(), d.currentTime.week = n.getDay(), d.currentTime.hour = n.getHours(), d.currentTime
            .minute = n.getMinutes(), d.currentTime.second = n.getSeconds(), f = d.currentTime.month, p =
            d.currentTime.year, initTime(d, type), $(".main-content .year").html(""), $(
                ".main-content .year").append("<span class='current'>" + d.currentTime.year + d.yearUnit +
                "</span>"), $(".main-content .second").html(""), $(".main-content .second").append(
                "<span class='current'>" + d.currentTime.second + d.secondUnit + "</span>");
        for (const n in d.seconds)
            if (d.seconds.hasOwnProperty(n)) {
                const e = d.seconds[n];
                e != d.currentTime.second && $(".main-content .second").append("<span>" + e + d.secondUnit +
                    "</span>")
            } $(".main-content .minute").html(""), $(".main-content .minute").append(
            "<span class='current'>" + d.currentTime.minute + d.minuteUnit + "</span>");
        for (const n in d.minutes)
            if (d.minutes.hasOwnProperty(n)) {
                const e = d.minutes[n];
                e != d.currentTime.minute && $(".main-content .minute").append("<span>" + e + d.minuteUnit +
                    "</span>")
            } $(".main-content .hour").html(""), $(".main-content .hour").append(
            "<span class='current'>" + d.currentTime.hour + d.hourUnit + "</span>");
        for (const n in d.hours)
            if (d.hours.hasOwnProperty(n)) {
                const e = d.hours[n];
                e != d.currentTime.hour && $(".main-content .hour").append("<span>" + e + d.hourUnit +
                    "</span>")
            } $(".main-content .shichen").html(""), $(".main-content .shichen").append(
            "<span class='current'>" + d.currentTime.shichen.str + "</span>");
        for (const n in d.shichens)
            if (d.shichens.hasOwnProperty(n)) {
                const e = d.shichens[n];
                e != d.currentTime.shichen.str && $(".main-content .shichen").append("<span>" + e +
                    "</span>")
            } $(".main-content .week").html(""), $(".main-content .week").append(
            "<span class='current'>" + d.currentTime.week + "</span>");
        for (const n in d.weeks)
            if (d.weeks.hasOwnProperty(n)) {
                const e = d.weeks[n];
                e != d.currentTime.week && $(".main-content .week").append("<span>" + e + "</span>")
            } $(".main-content .day").html(""), $(".main-content .day").append("<span class='current'>" +
            d.currentTime.day + d.dayUnit + "</span>");
        for (const n in d.days)
            if (d.days.hasOwnProperty(n)) {
                const e = d.days[n];
                e != d.currentTime.day && $(".main-content .day").append("<span>" + e + d.dayUnit +
                    "</span>")
            } $(".main-content .month").html(""), $(".main-content .month").append(
            "<span class='current'>" + d.currentTime.month + d.monthUnit + "</span>");
        for (const n in d.months)
            if (d.months.hasOwnProperty(n)) {
                const e = d.months[n];
                e != d.currentTime.month && $(".main-content .month").append("<span>" + e + d.monthUnit +
                    "</span>")
            }
    }, 8e3), setTimeout(function () {
        $(".second span").each(function (e, t) {
            $(t).css("animation", "second" + e + " 0s linear"), $(t).css("animation-fill-mode",
                "forwards"), n.insertRule("@keyframes second" + e +
                "{0%{transform: rotateZ(0);transform-origin: -" + m + " " + u +
                ";}100%{transform:rotateZ(" + -360 / d.seconds.length * e +
                "deg);transform-origin: -" + m + " " + u + ";}}", n.rules.length)
        }), $(".minute span").each(function (e, t) {
            $(t).css("animation", "minute" + e + " 0s linear"), $(t).css("animation-fill-mode",
                "forwards"), n.insertRule("@keyframes minute" + e +
                "{0%{transform: rotateZ(0);transform-origin: -" + c + " " + u +
                ";}100%{transform:rotateZ(" + -360 / d.minutes.length * e +
                "deg);transform-origin: -" + c + " " + u + ";}}", n.rules.length)
        }), $(".hour span").each(function (e, t) {
            $(t).css("animation", "hour" + e + " 0s linear"), $(t).css("animation-fill-mode",
                "forwards"), n.insertRule("@keyframes hour" + e +
                "{0%{transform: rotateZ(0);transform-origin: -" + o + " " + u +
                ";}100%{transform:rotateZ(" + -360 / d.hours.length * e +
                "deg);transform-origin: -" + o + " " + u + ";}}", n.rules.length)
        }), $(".shichen span").each(function (e, t) {
            $(t).css("animation", "shichen" + e + " 0s linear"), $(t).css("animation-fill-mode",
                "forwards"), n.insertRule("@keyframes shichen" + e +
                "{0%{transform: rotateZ(0);transform-origin: -" + i + " " + u +
                ";}100%{transform:rotateZ(" + -360 / d.shichens.length * e +
                "deg);transform-origin: -" + i + " " + u + ";}}", n.rules.length)
        }), $(".week span").each(function (e, t) {
            $(t).css("animation", "week" + e + " 0s linear"), $(t).css("animation-fill-mode",
                "forwards"), n.insertRule("@keyframes week" + e +
                "{0%{transform: rotateZ(0);transform-origin: -" + a + " " + u +
                ";}100%{transform:rotateZ(" + -360 / d.weeks.length * e +
                "deg);transform-origin: -" + a + " " + u + ";}}", n.rules.length)
        }), $(".day span").each(function (e, t) {
            $(t).css("animation", "day" + e + " 0s linear"), $(t).css("animation-fill-mode",
                "forwards"), n.insertRule("@keyframes day" + e +
                "{0%{transform: rotateZ(0);transform-origin: -" + s + " " + u +
                ";}100%{transform:rotateZ(" + -360 / d.days.length * e +
                "deg);transform-origin: -" + s + " " + u + ";}}", n.rules.length)
        }), $(".month span").each(function (e, t) {
            $(t).css("animation", "month" + e + " 0s linear"), $(t).css("animation-fill-mode",
                "forwards"), n.insertRule("@keyframes month" + e +
                "{0%{transform: rotateZ(0);transform-origin: -" + r + " " + u +
                ";}100%{transform:rotateZ(" + -360 / d.months.length * e +
                "deg);transform-origin: -" + r + " " + u + ";}}", n.rules.length)
        })
    }, 8e3), setTimeout(function () {
        setInterval(U, 1e3)
    }, 8e3);
    var g = 1,
        y = 1,
        T = 1,
        k = 1,
        w = 1,
        R = 1,
        Z = 1;

    function U() {
        "" == (I = $(".second span.current").next()).text() && (I = $(".second span").first());
        var e = 6 * (g - 1),
            t = 6 * g;
        $(".second").css("animation", "secondRun" + g + " 0.5s ease-in-out"), $(".second").css(
            "animation-fill-mode", "forwards"), n.insertRule("@keyframes secondRun" + g +
            "{0%{transform: rotateZ(" + e + "deg);transform-origin: -" + m + " " + u +
            ";} 50%{transform:rotateZ(" + (t + 1) + "deg);transform-origin: -" + m + " " + u +
            ";} 100%{transform:rotateZ(" + t + "deg);transform-origin: -" + m + " " + u + ";}}", n.rules.length
        ), $(".second span.current").removeClass("current"), I.addClass("current"), ++g > 60 && (g = 1);
        var h = $(".second span.current").text();
        if ("0秒" == h || "零秒" == h || "0 s" == h) {
            var l = 6 * (y - 1),
                U = 6 * y;
            "" == (I = $(".minute span.current").next()).text() && (I = $(".minute span").first()), $(".minute")
                .css("animation", "minuteRun" + y + " 0.5s ease-in-out"), $(".minute").css(
                    "animation-fill-mode", "forwards"), n.insertRule("@keyframes minuteRun" + y +
                    " {0%{transform: rotateZ(" + l + "deg);transform-origin: -" + c + " " + u +
                    ";} 100%{transform:rotateZ(" + U + "deg);transform-origin: -" + c + " " + u + ";}}", n.rules
                    .length), $(".minute span.current").removeClass("current"), I.addClass("current"), ++y > 60 &&
                (y = 1)
        }
        var v = $(".minute span.current").text();
        if (!("0秒" != h && "零秒" != h && "0 s" != h || "0分" != v && "零分" != v && "0 m" != v)) {
            var C = 15 * (T - 1),
                x = 15 * T;
            "" == (I = $(".hour span.current").next()).text() && (I = $(".hour span").first()), $(".hour").css(
                "animation", "hourRun" + T + " 0.5s ease-in-out"), $(".hour").css("animation-fill-mode",
                "forwards"), n.insertRule("@keyframes hourRun" + T + " {0%{transform: rotateZ(" + C +
                "deg);transform-origin: -" + o + " " + u + ";} 100%{transform:rotateZ(" + x +
                "deg);transform-origin: -" + o + " " + u + ";}}", n.rules.length), $(".hour span.current").removeClass(
                "current"), I.addClass("current"), ++T > 24 && (T = 1)
        }
        var S = $(".hour span.current").text();
        if (("0秒" == h || "零秒" == h || "0 s" == h) && ("0分" == v || "零分" == v || "0 m" == v) && isShichen(S)) {
            var b = 30 * (k - 1),
                O = 30 * k;
            "" == (I = $(".shichen span.current").next()).text() && (I = $(".shichen span").first()), $(
                    ".shichen").css("animation", "shichenRun" + k + " 0.5s ease-in-out"), $(".shichen").css(
                    "animation-fill-mode", "forwards"), n.insertRule("@keyframes shichenRun" + k +
                    " {0%{transform: rotateZ(" + b + "deg);transform-origin: -" + i + " " + u +
                    ";} 100%{transform:rotateZ(" + O + "deg);transform-origin: -" + i + " " + u + ";}}", n.rules
                    .length), $(".shichen span.current").removeClass("current"), I.addClass("current"), ++k >
                30 && (k = 1)
        }
        if (!("0秒" != h && "零秒" != h && "0 s" != h || "0分" != v && "零分" != v && "0 m" != v || "0时" != S && "零时" !=
                S && "0 h" != S)) {
            var P = 360 / 7 * (w - 1),
                M = 360 / 7 * w,
                W = 360 / d.days.length * (R - 1),
                _ = 360 / d.days.length * R;
            console.log(W);
            var Y = $(".week span.current").next(),
                D = $(".day span.current").next();
            "" == Y.text() && (Y = $(".week span").first()), "" == D.text() && (D = $(".day span").first()), $(
                    ".week").css("animation", "weekRun" + w + " 0.5s ease-in-out"), $(".week").css(
                    "animation-fill-mode", "forwards"), n.insertRule("@keyframes weekRun" + w +
                    " {0%{transform: rotateZ(" + P + "deg);transform-origin: -" + a + " " + u +
                    ";} 100%{transform:rotateZ(" + M + "deg);transform-origin: -" + a + " " + u + ";}}", n.rules
                    .length), $(".day").css("animation", "dayRun" + R + " 0.5s ease-in-out"), $(".day").css(
                    "animation-fill-mode", "forwards"), n.insertRule("@keyframes dayRun" + R +
                    " {0%{transform: rotateZ(" + W + "deg);transform-origin: -" + s + " " + u +
                    ";} 100%{transform:rotateZ(" + _ + "deg);transform-origin: -" + s + " " + u + ";}}", n.rules
                    .length), $(".week span.current").removeClass("current"), Y.addClass("current"), ++w > 7 &&
                (w = 1), $(".day span.current").removeClass("current"), D.addClass("current"), ++R > d.days.length &&
                (R = 1)
        }
        var H = $(".day span.current").text();
        if (!("1 day" != H && H != numToSimp(1) + "日" && H != numToTrad(1) + "日" && "1日" != H || "0秒" != h &&
                "零秒" != h && "0 s" != h || "0分" != v && "零分" != v && "0 m" != v || "0时" != S && "零时" != S &&
                "0 h" != S)) {
            var I, F = 30 * (Z - 1),
                z = 30 * Z;
            "" == (I = $(".month span.current").next()).text() && (I = $(".month span").first()), $(".month").css(
                    "animation", "monthRun" + Z + " 0.5s ease-in-out"), $(".month").css("animation-fill-mode",
                    "forwards"), n.insertRule("@keyframes monthRun" + Z + " {0%{transform: rotateZ(" + F +
                    "deg);transform-origin: -" + r + " " + u + ";} 100%{transform:rotateZ(" + z +
                    "deg);transform-origin: -" + r + " " + u + ";}}", n.rules.length), ++f > 12 && (f = 1), $(
                    ".day").html(""), d.days = updateDays(type, p, f, 1), d.currentTime.day = getFirstDay(type),
                $(".main-content .day").append("<span class='current'>" + d.currentTime.day + d.dayUnit +
                    "</span>");
            for (const n in d.days)
                if (d.days.hasOwnProperty(n)) {
                    const e = d.days[n];
                    e != d.currentTime.day && $(".main-content .day").append("<span>" + e + d.dayUnit +
                        "</span>")
                } $(".day span").each(function (e, t) {
                $(t).css("animation", "day" + e + " 0.5s linear"), $(t).css("animation-fill-mode",
                    "forwards"), n.insertRule("@keyframes day" + e +
                    "{0%{transform: rotateZ(0);transform-origin: -" + s + " " + u +
                    ";}100%{transform:rotateZ(" + -360 / d.days.length * (e + 1) +
                    "deg);transform-origin: -" + s + " " + u + ";}}", n.rules.length)
            }), $(".month span.current").removeClass("current"), I.addClass("current"), ++Z > 12 && (Z = 1)
        }
        1 != f || "1 day" != H && H != numToSimp(1) + "日" && H != numToTrad(1) + "日" && "1日" != H || "0秒" != h &&
            "零秒" != h && "0 s" != h || "0分" != v && "零分" != v && "0 m" != v || "0时" != S && "零时" != S && "0 h" !=
            S || (p++, d.currentTime.year = getYear(type, p), $(".year span").html(getYear(type, p) + d.yearUnit))
    }
});

由于代码依赖于JQuery 大家可以把 JQuery.js 代码拿过来用了!!!
点击下载 js/jquery-3.4.1.min.js
生命诚可贵,代码有抄袭!!!

  • 4
    点赞
  • 14
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 3
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

薄荷街的兔比先生。

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值