罗马时钟代码 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
生命诚可贵，代码有抄袭！！！

罗马时钟代码 jquery相关推荐

抖音超火的罗马时钟html代码,抖音罗马时钟代码实现 · Issue #2 · 424363283/accumulate · GitHub...
抖音超火的罗马时钟 * { margin: 0; padding: 0 } html, body { width: 100%; height: 100%; background-color: #000 ...
关于酷狗的动态壁纸的代码（罗马时钟）
关于酷狗的动态壁纸的代码(罗马时钟) 可以自行换图片哦话不多说,上代码首先我们先看到酷狗的示例文件,需要一个css的文件和js的文件,img是你自己要的图片,如果要修改,记得重命名 margin: ...
jQuery罗盘时钟代码
源码介绍: jQuery罗盘时钟代码基于jquery-3.4.1.min.js制作,环形罗盘,时钟动画. 网盘下载地址: http://www.bytepan.com/4iimSDHOqnu 图片:
用html实现炫酷罗马时钟
![在这里插入图片描述](https://img-blog.csdnimg.cn/20200430141647148.gi ## 炫酷罗马时钟我们看一下运行效果这是代码可以复制 <!DOCT ...
Unity 制作抖音同款罗马时钟
这个罗马时钟好像出来好久了在某音上,刚看到觉得很好玩,所以自己就想着实现一下效果. 下面直接上图先说一下制作思路:1. 文本的放置位置.2.时间的获取和校正. 3. Text随着时间的刷新 ...
HTML5 Canvas爱心时钟代码
这是一款数字时钟动画,数字又多个小爱心组成,又何问起整理,随着时间推进,每一秒钟新数字替换旧数字,旧数字离去使用天女散花动画,花是五颜六色的. 查看效果: http://hovertree.com/t ...
php手机网站底部导航代码,jQuery微信手机端底部弹出导航菜单列表代码
jQuery微信手机端底部弹出导航菜单列表代码 jQuery微信手机端底部弹出导航菜单列表代码是一款网页底部点击按钮弹出浮动的图标菜单列表的手机特效. js代码 function showList() ...
java数字时钟代码,Android自定义数字时钟代码，android自定义时钟,package jp.t
Android自定义数字时钟代码,android自定义时钟,package jp.tpackage jp.tsmsogn.digitalclock;import java.util.Calendar; ...
java时钟代码_一个经典的JAVA APPLET时钟程序（一）
转眼间一年又要过了,自己又老了一岁,郁闷啊.趁着还有几分钟才新年,赶快再发几篇文章,给过去的一年添点东西. 该程序是从网上发现的,是一个简单的时钟显示程序. 代码特色: 时钟代码提供了各种接口,可以在 ...

罗马时钟代码 jquery

罗马时钟代码

罗马时钟代码 jquery相关推荐

最新文章

热门文章