罗马时钟代码
最近非常流行的罗马时钟,今天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
生命诚可贵,代码有抄袭!!!