动态时间罗盘html讲解,基于 JQuery 的动态罗盘时钟

最新推荐文章于 2024-08-13 09:00:00 发布
最新推荐文章于 2024-08-13 09:00:00 发布
阅读量1.1k 收藏 1
点赞数
文章标签： 动态时间罗盘html讲解

基于 JQuery 的动态罗盘时钟，

惯例，先来效果图

186842195_2_20200330032400525

Index.html

动态时钟

* {

margin: 0;

padding: 0;

}

body {

background-attachment: fixed;

color: #F5F4F6;

font-size: 12px;

font-weight: bold;

overflow: hidden;

width: 1000px;

height: 900px;

font-family: "微软雅黑";

}

audio {

position: absolute;

right: 0;

opacity: 0.1;

transition: all 1s;

}

audio:hover {

opacity: 1;

}

.current {

color: #D1A3F7;

}

video {

z-index: -1;

/* object-fit: fill; */

position: fixed;

/* right: 0px;

bottom: 0px; */

min-width: 100%;

min-height: 100%;

/* height: auto;

width: auto; */

}

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

}

common.js

function numToSimp(n){var str="";var units=parseInt(n%10);var tens=parseInt(n/10);var trans="零一二三四五六七八九十";if(tens>1){str=trans.charAt(tens);}

if(tens!=0){str+="十";}

if(units!=0){str+=trans.charAt(units);}

if(tens==0&&units==0){str=trans[0];}

return str;}

function numToTrad(n){var str="";var units=parseInt(n%10);var tens=parseInt(n/10);var trans="零一二三四五六七八九";if(tens>1){str=trans.charAt(tens);}

if(tens!=0){str+="十";}

if(units!=0){str+=trans.charAt(units);}

if(tens==0&&units==0){str=trans[0];}

return str;}

function numToEng(n){var str="";var units=parseInt(n%10);var tens=parseInt(n/10);var trans=[["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"],];if(n<20)

{str=trans[0][n];}else{str=trans[1][tens-2];if(units!=0){str+=trans[0][units];}}

if(tens==0&&units==0){str=trans[0][0];}

return str;}

function isLeapYear(year){if(year%4==0&&year%100!=0||year%400==0)

{return true;}else{return false;}}

function getYear(type,year){var res=""

var units=parseInt(year/1%10);var tens=parseInt(year/10%10);var hund=parseInt(year/100%10);var thou=parseInt(year/1000%10);switch(type){case 0:case 3:res=year;break;case 1:res=numToSimp(thou)+numToSimp(hund)+numToSimp(tens)+numToSimp(units);break;case 2:res=numToTrad(thou)+numToTrad(hund)+numToTrad(tens)+numToTrad(units);break;}

return res;}

function getMonths(type,month){var months=new Array();var monthsEng=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];var i=1;switch(type){case 0:for(i=month;i<=12;i++)

{months.push(i);}

for(i=1;i

{months.push(i);}

break;case 1:for(i=month;i<=12;i++)

{months.push(numToSimp(i));}

for(i=1;i

{months.push(numToSimp(i));}

break;case 2:for(i=month;i<=12;i++)

{months.push(numToTrad(i));}

for(i=1;i

{months.push(numToTrad(i));}

break;case 3:for(i=month-1;i<12;i++)

{months.push(monthsEng[i]);}

for(i=0;i

{months.push(monthsEng[i]);}

break;}

return months;}

function getdays(type,year,month,day){var days=new Array();var j=1;var isLeap=isLeapYear(year);switch(type){case 0:case 3:for(j=day;j<=31;j++)

{days.push(j)

if(month==2&&isLeap&&j==29){break;}

if(month==2&&!isLeap&&j==28){break;}

if((month==2||month==4||month==6||month==9||month==11)&&j==30){break;}}

for(j=1;j

break;case 1:for(j=day;j<=31;j++)

{days.push(numToSimp(j))

if(month==2&&isLeap&&j==29){break;}

if(month==2&&!isLeap&&j==28){break;}

if((month==2||month==4||month==6||month==9||month==11)&&j==30){break;}}

for(j=1;j

break;case 2:for(j=day;j<=31;j++)

{days.push(numToTrad(j))

if(month==2&&isLeap&&j==29){break;}

if(month==2&&!isLeap&&j==28){break;}

if((month==2||month==4||month==6||month==9||month==11)&&j==30){break;}}

for(j=1;j

break;}

return days;}

function getShiChen(type,hour){var shichen={index:0,str:""};switch(type){case 0:if(hour>=23||hour<1){shichen.index=0;shichen.str="23:00-1:00";}

else if(hour>=1&&hour<3){shichen.index=1;shichen.str="1:00-3:00";}

else if(hour>=3&&hour<5){shichen.index=2;shichen.str="3:00-5:00";}

else if(hour>=5&&hour<7){shichen.index=3;shichen.str="5:00-7:00";}

else if(hour>=7&&hour<9){shichen.index=4;shichen.str="7:00-9:00";}

else if(hour>=9&&hour<11){shichen.index=5;shichen.str="9:00-11:00";}

else if(hour>=11&&hour<13){shichen.index=6;shichen.str="11:00-13:00";}

else if(hour>=13&&hour<15){shichen.index=7;shichen.str="13:00-15:00";}

else if(hour>=15&&hour<17){shichen.index=8;shichen.str="15:00-17:00";}

else if(hour>=17&&hour<19){shichen.index=9;shichen.str="17:00-19:00";}

else if(hour>=19&&hour<21){shichen.index=10;shichen.str="19:00-21:00";}

else if(hour>=21&&hour<23){shichen.index=11;shichen.str="21:00-23:00";}

break;case 1:case 2:if(hour>=23||hour<1){shichen.index=0;shichen.str="子时"}

else if(hour>=1&&hour<3){shichen.index=1;shichen.str="丑时";}

else if(hour>=3&&hour<5){shichen.index=2;shichen.str="寅时";}

else if(hour>=5&&hour<7){shichen.index=3;shichen.str="卯时";}

else if(hour>=7&&hour<9){shichen.index=4;shichen.str="辰时";}

else if(hour>=9&&hour<11){shichen.index=5;shichen.str="巳时";}

else if(hour>=11&&hour<13){shichen.index=6;shichen.str="午时";}

else if(hour>=13&&hour<15){shichen.index=7;shichen.str="未时";}

else if(hour>=15&&hour<17){shichen.index=8;shichen.str="申时";}

else if(hour>=17&&hour<19){shichen.index=9;shichen.str="酉时";}

else if(hour>=19&&hour<21){shichen.index=10;shichen.str="戌时";}

else if(hour>=21&&hour<23){shichen.index=11;shichen.str="亥时";}

break;case 3:if(hour>=23||hour<1){shichen.index=0;shichen.str="23pm to 1am"}

else if(hour>=1&&hour<3){shichen.index=1;shichen.str="1am to 3am"}

else if(hour>=3&&hour<5){shichen.index=2;shichen.str="3am to 5am"}

else if(hour>=5&&hour<7){shichen.index=3;shichen.str="5pm to 7am"}

else if(hour>=7&&hour<9){shichen.index=4;shichen.str="7pm to 9am"}

else if(hour>=9&&hour<11){shichen.index=5;shichen.str="9pm to 11am"}

else if(hour>=11&&hour<13){shichen.index=6;shichen.str="11am to 13pm"}

else if(hour>=13&&hour<15){shichen.index=7;shichen.str="13pm to 15pm"}

else if(hour>=15&&hour<17){shichen.index=8;shichen.str="15pm to 17pm"}

else if(hour>=17&&hour<19){shichen.index=9;shichen.str="17pm to 19pm"}

else if(hour>=19&&hour<21){shichen.index=10;shichen.str="19pm to 21pm"}

else if(hour>=21&&hour<23){shichen.index=11;shichen.str="21pm to 23pm"}

break;}

return shichen;}

function getShiChens(type,shichen){var shichens=new Array();var i=0;var shichen0=["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"];var shichen1=["子时","丑时","寅时","卯时","辰时","巳时","午时","未时","申时","酉时","戌时","亥时"];var shichen3=["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(type){case 0:for(i=shichen.index;i<12;i++){shichens.push(shichen0[i]);}

for(i=0;i

break;case 1:case 2:for(i=shichen.index;i<12;i++){shichens.push(shichen1[i]);}

for(i=0;i

break;case 3:for(i=shichen.index;i<12;i++){shichens.push(shichen3[i]);}

for(i=0;i

break;}

return shichens;}

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

function getWeeks(type,week){weeks=[];weeksEng=["Sun","Mon","Tues","Wed","Thur","Fri","Sat"];var i=0;switch(type){case 0:case 1:case 2:for(i=week;i<7;i++){weeks[i]="星期"+numToSimp(i);if(i==0){weeks[i]="星期日"}}

for(i=0;i

break;case 3:for(i=week;i<7;i++)

{weeks.push(weeksEng[i]);}

for(i=0;i

{weeks.push(weeksEng[i]);}

break;}

return weeks;}

function getWeek(type,week){weekEng=["Sun","Mon","Tues","Wed","Thur","Fri","Sat"];res="";switch(type){case 0:case 1:case 2:if(week==0){res="日"}else{res=numToSimp(week);}

break;case 3:res=weekEng[week];break;}

return res;}

function getHours(type,hour){var hours=new Array();var i=0;switch(type){case 0:case 3:for(i=hour;i<24;i++){hours.push(i);}

for(i=0;i

break;case 1:for(i=hour;i<24;i++){hours.push(numToSimp(i));}

for(i=0;i

break;case 2:for(i=hour;i<24;i++){hours.push(numToTrad(i));}

for(i=0;i

break;}

return hours;}

function getMinutes(type,minute){var minutes=new Array();var i=0;switch(type){case 0:case 3:for(i=minute;i<60;i++){minutes.push(i);}

for(i=0;i

break;case 1:for(i=minute;i<60;i++){minutes.push(numToSimp(i));}

for(i=0;i

break;case 2:for(i=minute;i<60;i++){minutes.push(numToTrad(i));}

for(i=0;i

break;}

return minutes;}

function getSeconds(type,second){var seconds=new Array();var i=0;switch(type){case 0:case 3:for(i=second;i<60;i++){seconds.push(i);}

for(i=0;i

break;case 1:for(i=second;i<60;i++){seconds.push(numToSimp(i));}

for(i=0;i

break;case 2:for(i=second;i<60;i++){seconds.push(numToTrad(i));}

for(i=0;i

break;}

return seconds;}

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

return false;}

function updateDays(type,year,month,day){var days=new Array();var j=1;var isLeap=isLeapYear(year);switch(type){case 0:case 3:for(j=day;j<=31;j++)

{days.push(j)

if(month==2&&isLeap&&j==29){break;}

if(month==2&&!isLeap&&j==28){break;}

if((month==2||month==4||month==6||month==9||month==11)&&j==30){break;}}

for(j=1;j

break;case 1:for(j=1;j<=31;j++)

{days.push(numToSimp(j))

if(month==2&&isLeap&&j==29){break;}

if(month==2&&!isLeap&&j==28){break;}

if((month==2||month==4||month==6||month==9||month==11)&&j==30){break;}}

for(j=1;j

break;case 2:for(j=1;j<=31;j++)

{days.push(numToTrad(j))

if(month==2&&isLeap&&j==29){break;}

if(month==2&&!isLeap&&j==28){break;}

if((month==2||month==4||month==6||month==9||month==11)&&j==30){break;}}

for(j=1;j

break;}

return days;}

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

return day;}

test.js

$(document).ready(function(){var style=document.styleSheets[0];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);style.cssRules[4].style.color=config.pointer_color;if(config.sound)

{var ele=""

$("body").append(ele);}

switch(config.background_style)

{case 0:var ele1="url('images/"+config.background_picture+"') fixed no-repeat"

$('body').css('background',ele1);$('body').css('background-size','100% 100%');break;case 1:$('body').append('')

break;case 2:$('body').css('background',config.background_color);break;}

var monthLeft=$(".main-content .month").css("left");var dayLeft=$(".main-content .day").css("left");var weekLeft=$(".main-content .week").css("left");var shichenLeft=$(".main-content .shichen").css("left");var hourLeft=$(".main-content .hour").css("left");var minuteLeft=$(".main-content .minute").css("left");var secondLeft=$(".main-content .second").css("left");var top=$(".main-content .month").css("top");var yearLeft=$(".main-content .year span").width()/2;var Time={currentTime:{year:1970,month:1,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:"秒"}

var month=Time.currentTime.month;var year=Time.currentTime.year;initTime(Time,type);$(".main-content .year").append(""+Time.currentTime.year+Time.yearUnit+"");var h=$(".year span").height();top=-(parseInt(top))-parseInt(h)/2;top+="px";$(".main-content .month").append(""+Time.currentTime.month+Time.monthUnit+"");$(".main-content .day").append(""+Time.currentTime.day+Time.dayUnit+"");$(".main-content .week").append(""+Time.currentTime.week+"");$(".main-content .shichen").append(""+Time.currentTime.shichen.str+"");$(".main-content .hour").append(""+Time.currentTime.hour+Time.hourUnit+"");$(".main-content .minute").append(""+Time.currentTime.minute+Time.minuteUnit+"");$(".main-content .second").append(""+Time.currentTime.second+Time.secondUnit+"");for(const key in Time.months){if(Time.months.hasOwnProperty(key)){const element=Time.months[key];if(element!=Time.currentTime.month){$(".main-content .month").append(""+element+Time.monthUnit+"");}}}

for(const key in Time.days){if(Time.days.hasOwnProperty(key)){const element=Time.days[key];if(element!=Time.currentTime.day){$(".main-content .day").append(""+element+Time.dayUnit+"");}}}

for(const key in Time.weeks){if(Time.weeks.hasOwnProperty(key)){const element=Time.weeks[key];if(element!=Time.currentTime.week){$(".main-content .week").append(""+element+"");}}}

for(const key in Time.shichens){if(Time.shichens.hasOwnProperty(key)){const element=Time.shichens[key];if(element!=Time.currentTime.shichen.str){$(".main-content .shichen").append(""+element+"");}}}

for(const key in Time.hours){if(Time.hours.hasOwnProperty(key)){const element=Time.hours[key];if(element!=Time.currentTime.hour){$(".main-content .hour").append(""+element+Time.hourUnit+"");}}}

for(const key in Time.minutes){if(Time.minutes.hasOwnProperty(key)){const element=Time.minutes[key];if(element!=Time.currentTime.minute){$(".main-content .minute").append(""+element+Time.minuteUnit+"");}}}

for(const key in Time.seconds){if(Time.seconds.hasOwnProperty(key)){const element=Time.seconds[key];if(element!=Time.currentTime.second){$(".main-content .second").append(""+element+Time.secondUnit+"");}}}

setTimeout(function(){$(".month span").each(function(index,element){$(element).css("animation","month"+index+" 1s linear");$(element).css("animation-fill-mode","forwards");style.insertRule("@keyframes month"+index+"{0%{transform: rotateZ(0);transform-origin: -"+monthLeft+" "+top+";}100%{transform:rotateZ("+-(360/12)*(index)+"deg);transform-origin: -"+monthLeft+" "+top+";}}",style.rules.length);});},0);setTimeout(function(){$(".day span").each(function(index,element){$(element).css("animation","day"+index+" 1s linear");$(element).css("animation-fill-mode","forwards");style.insertRule("@keyframes day"+index+"{0%{transform: rotateZ(0);transform-origin: -"+dayLeft+" "+top+";}100%{transform:rotateZ("+-(360/Time.days.length)*index+"deg);transform-origin: -"+dayLeft+" "+top+";}}",style.rules.length);});},1000);setTimeout(function(){$(".week span").each(function(index,element){$(element).css("animation","week"+index+" 1s linear");$(element).css("animation-fill-mode","forwards");style.insertRule("@keyframes week"+index+"{0%{transform: rotateZ(0);transform-origin: -"+weekLeft+" "+top+";}100%{transform:rotateZ("+-(360/Time.weeks.length)*index+"deg);transform-origin: -"+weekLeft+" "+top+";}}",style.rules.length);});},2000);setTimeout(function(){$(".shichen span").each(function(index,element){$(element).css("animation","shichen"+index+" 1s linear");$(element).css("animation-fill-mode","forwards");style.insertRule("@keyframes shichen"+index+"{0%{transform: rotateZ(0);transform-origin: -"+shichenLeft+" "+top+";}100%{transform:rotateZ("+-(360/Time.shichens.length)*index+"deg);transform-origin: -"+shichenLeft+" "+top+";}}",style.rules.length);});},3000);setTimeout(function(){$(".hour span").each(function(index,element){$(element).css("animation","hour"+index+" 1s linear");$(element).css("animation-fill-mode","forwards");style.insertRule("@keyframes hour"+index+"{0%{transform: rotateZ(0);transform-origin: -"+hourLeft+" "+top+";}100%{transform:rotateZ("+-(360/Time.hours.length)*index+"deg);transform-origin: -"+hourLeft+" "+top+";}}",style.rules.length);});},4000);setTimeout(function(){$(".minute span").each(function(index,element){$(element).css("animation","minute"+index+" 1s linear");$(element).css("animation-fill-mode","forwards");style.insertRule("@keyframes minute"+index+"{0%{transform: rotateZ(0);transform-origin: -"+minuteLeft+" "+top+";}100%{transform:rotateZ("+-(360/Time.minutes.length)*index+"deg);transform-origin: -"+minuteLeft+" "+top+";}}",style.rules.length);});},5000);setTimeout(function(){$(".second span").each(function(index,element){$(element).css("animation","second"+index+" 1s linear");$(element).css("animation-fill-mode","forwards");style.insertRule("@keyframes second"+index+"{0%{transform: rotateZ(0);transform-origin: -"+secondLeft+" "+top+";}100%{transform:rotateZ("+-(360/Time.seconds.length)*index+"deg);transform-origin: -"+secondLeft+" "+top+";}}",style.rules.length);});},6000);setTimeout(function(){$(".year span").css("animation","yearRun 1s linear infinite");style.insertRule("@keyframes yearRun {0%{transform: rotateZ(0);transform-origin: -"+yearLeft+" "+top+";}100%{transform:rotateZ(720deg);transform-origin: -"+yearLeft+" "+top+";}}",style.rules.length);$($(".main-content .second span")[0]).removeClass("current");$(".second span").each(function(index,element){$(element).css("animation","secondRun"+index+" 1s linear infinite");style.insertRule("@keyframes secondRun"+index+" {0%{transform: rotateZ(0);transform-origin: -"+secondLeft+" "+top+";}100%{transform:rotateZ("+((index+1)*720)+"deg);transform-origin: -"+secondLeft+" "+top+";}}",style.rules.length);});$($(".main-content .minute span")[0]).removeClass("current");$(".minute span").each(function(index,element){$(element).css("animation","minuteRun"+index+" 1s linear infinite");style.insertRule("@keyframes minuteRun"+index+" {0%{transform: rotateZ(0);transform-origin: -"+minuteLeft+" "+top+";}100%{transform:rotateZ("+((index+1)*720)+"deg);transform-origin: -"+minuteLeft+" "+top+";}}",style.rules.length);});$($(".main-content .hour span")[0]).removeClass("current");$(".hour span").each(function(index,element){$(element).css("animation","hourRun"+index+" 1s linear infinite");style.insertRule("@keyframes hourRun"+index+" {0%{transform: rotateZ(0);transform-origin: -"+hourLeft+" "+top+";}100%{transform:rotateZ("+((index+1)*720)+"deg);transform-origin: -"+hourLeft+" "+top+";}}",style.rules.length);});$($(".main-content .shichen span")[0]).removeClass("current");$(".shichen span").each(function(index,element){$(element).css("animation","shichenRun"+index+" 1s linear infinite");style.insertRule("@keyframes shichenRun"+index+" {0%{transform: rotateZ(0);transform-origin: -"+shichenLeft+" "+top+";}100%{transform:rotateZ("+((index+1)*720)+"deg);transform-origin: -"+shichenLeft+" "+top+";}}",style.rules.length);});$($(".main-content .week span")[0]).removeClass("current");$(".week span").each(function(index,element){$(element).css("animation","weekRun"+index+" 1s linear infinite");style.insertRule("@keyframes weekRun"+index+" {0%{transform: rotateZ(0);transform-origin: -"+weekLeft+" "+top+";}100%{transform:rotateZ("+((index+1)*720)+"deg);transform-origin: -"+weekLeft+" "+top+";}}",style.rules.length);});$($(".main-content .day span")[0]).removeClass("current");$(".day span").each(function(index,element){$(element).css("animation","dayRun"+index+" 1s linear infinite");style.insertRule("@keyframes dayRun"+index+" {0%{transform: rotateZ(0);transform-origin: -"+dayLeft+" "+top+";}100%{transform:rotateZ("+((index+1)*720)+"deg);transform-origin: -"+dayLeft+" "+top+";}}",style.rules.length);});$($(".main-content .month span")[0]).removeClass("current");$(".month span").each(function(index,element){$(element).css("animation","monthRun"+index+" 1s linear infinite");style.insertRule("@keyframes monthRun"+index+" {0%{transform: rotateZ(0);transform-origin: -"+monthLeft+" "+top+";}100%{transform:rotateZ("+((index+1)*720)+"deg);transform-origin: -"+monthLeft+" "+top+";}}",style.rules.length);});},7000);setTimeout(function(){var myDate=new Date();Time.currentTime.year=myDate.getFullYear();Time.currentTime.month=myDate.getMonth()+1;Time.currentTime.day=myDate.getDate();Time.currentTime.week=myDate.getDay();Time.currentTime.hour=myDate.getHours();Time.currentTime.minute=myDate.getMinutes();Time.currentTime.second=myDate.getSeconds();month=Time.currentTime.month;year=Time.currentTime.year;initTime(Time,type);$(".main-content .year").html("");$(".main-content .year").append(""+Time.currentTime.year+Time.yearUnit+"");$(".main-content .second").html("");$(".main-content .second").append(""+Time.currentTime.second+Time.secondUnit+"");for(const key in Time.seconds){if(Time.seconds.hasOwnProperty(key)){const element=Time.seconds[key];if(element!=Time.currentTime.second){$(".main-content .second").append(""+element+Time.secondUnit+"");}}}

$(".main-content .minute").html("");$(".main-content .minute").append(""+Time.currentTime.minute+Time.minuteUnit+"");for(const key in Time.minutes){if(Time.minutes.hasOwnProperty(key)){const element=Time.minutes[key];if(element!=Time.currentTime.minute){$(".main-content .minute").append(""+element+Time.minuteUnit+"");}}}

$(".main-content .hour").html("");$(".main-content .hour").append(""+Time.currentTime.hour+Time.hourUnit+"");for(const key in Time.hours){if(Time.hours.hasOwnProperty(key)){const element=Time.hours[key];if(element!=Time.currentTime.hour){$(".main-content .hour").append(""+element+Time.hourUnit+"");}}}

$(".main-content .shichen").html("");$(".main-content .shichen").append(""+Time.currentTime.shichen.str+"");for(const key in Time.shichens){if(Time.shichens.hasOwnProperty(key)){const element=Time.shichens[key];if(element!=Time.currentTime.shichen.str){$(".main-content .shichen").append(""+element+"");}}}

$(".main-content .week").html("");$(".main-content .week").append(""+Time.currentTime.week+"");for(const key in Time.weeks){if(Time.weeks.hasOwnProperty(key)){const element=Time.weeks[key];if(element!=Time.currentTime.week){$(".main-content .week").append(""+element+"");}}}

$(".main-content .day").html("");$(".main-content .day").append(""+Time.currentTime.day+Time.dayUnit+"");for(const key in Time.days){if(Time.days.hasOwnProperty(key)){const element=Time.days[key];if(element!=Time.currentTime.day){$(".main-content .day").append(""+element+Time.dayUnit+"");}}}

$(".main-content .month").html("");$(".main-content .month").append(""+Time.currentTime.month+Time.monthUnit+"");for(const key in Time.months){if(Time.months.hasOwnProperty(key)){const element=Time.months[key];if(element!=Time.currentTime.month){$(".main-content .month").append(""+element+Time.monthUnit+"");}}}},8000);setTimeout(function(){$(".second span").each(function(index,element){$(element).css("animation","second"+index+" 0s linear");$(element).css("animation-fill-mode","forwards");style.insertRule("@keyframes second"+index+"{0%{transform: rotateZ(0);transform-origin: -"+secondLeft+" "+top+";}100%{transform:rotateZ("+-(360/Time.seconds.length)*index+"deg);transform-origin: -"+secondLeft+" "+top+";}}",style.rules.length);});$(".minute span").each(function(index,element){$(element).css("animation","minute"+index+" 0s linear");$(element).css("animation-fill-mode","forwards");style.insertRule("@keyframes minute"+index+"{0%{transform: rotateZ(0);transform-origin: -"+minuteLeft+" "+top+";}100%{transform:rotateZ("+-(360/Time.minutes.length)*index+"deg);transform-origin: -"+minuteLeft+" "+top+";}}",style.rules.length);});$(".hour span").each(function(index,element){$(element).css("animation","hour"+index+" 0s linear");$(element).css("animation-fill-mode","forwards");style.insertRule("@keyframes hour"+index+"{0%{transform: rotateZ(0);transform-origin: -"+hourLeft+" "+top+";}100%{transform:rotateZ("+-(360/Time.hours.length)*index+"deg);transform-origin: -"+hourLeft+" "+top+";}}",style.rules.length);});$(".shichen span").each(function(index,element){$(element).css("animation","shichen"+index+" 0s linear");$(element).css("animation-fill-mode","forwards");style.insertRule("@keyframes shichen"+index+"{0%{transform: rotateZ(0);transform-origin: -"+shichenLeft+" "+top+";}100%{transform:rotateZ("+-(360/Time.shichens.length)*index+"deg);transform-origin: -"+shichenLeft+" "+top+";}}",style.rules.length);});$(".week span").each(function(index,element){$(element).css("animation","week"+index+" 0s linear");$(element).css("animation-fill-mode","forwards");style.insertRule("@keyframes week"+index+"{0%{transform: rotateZ(0);transform-origin: -"+weekLeft+" "+top+";}100%{transform:rotateZ("+-(360/Time.weeks.length)*index+"deg);transform-origin: -"+weekLeft+" "+top+";}}",style.rules.length);});$(".day span").each(function(index,element){$(element).css("animation","day"+index+" 0s linear");$(element).css("animation-fill-mode","forwards");style.insertRule("@keyframes day"+index+"{0%{transform: rotateZ(0);transform-origin: -"+dayLeft+" "+top+";}100%{transform:rotateZ("+-(360/Time.days.length)*index+"deg);transform-origin: -"+dayLeft+" "+top+";}}",style.rules.length);});$(".month span").each(function(index,element){$(element).css("animation","month"+index+" 0s linear");$(element).css("animation-fill-mode","forwards");style.insertRule("@keyframes month"+index+"{0%{transform: rotateZ(0);transform-origin: -"+monthLeft+" "+top+";}100%{transform:rotateZ("+-(360/Time.months.length)*index+"deg);transform-origin: -"+monthLeft+" "+top+";}}",style.rules.length);});},8000);setTimeout(function(){setInterval(run,1000)},8000)

var seci=1;var mini=1;var houri=1;var shicheni=1;var weeki=1;var dayi=1;var monthi=1;function run(){var next=$(".second span.current").next();if(next.text()==""){next=$(".second span").first();}

var secang1=6*(seci-1);var secang2=6*seci;$(".second").css("animation","secondRun"+seci+" 0.5s ease-in-out");$(".second").css("animation-fill-mode","forwards");style.insertRule("@keyframes secondRun"+seci+"{0%{transform: rotateZ("+secang1+"deg);transform-origin: -"+secondLeft+" "+top+";} 50%{transform:rotateZ("+(secang2+1)+"deg);transform-origin: -"+secondLeft+" "+top+";} 100%{transform:rotateZ("+secang2+"deg);transform-origin: -"+secondLeft+" "+top+";}}",style.rules.length);$(".second span.current").removeClass("current");next.addClass("current");seci++;if(seci>60){seci=1;}

var secText=$(".second span.current").text();if(secText=="0秒"||secText=="零秒"||secText=="0 s"){var minang1=6*(mini-1);var minang2=6*mini;var next=$(".minute span.current").next();if(next.text()==""){next=$(".minute span").first();}

$(".minute").css("animation","minuteRun"+mini+" 0.5s ease-in-out");$(".minute").css("animation-fill-mode","forwards");style.insertRule("@keyframes minuteRun"+mini+" {0%{transform: rotateZ("+minang1+"deg);transform-origin: -"+minuteLeft+" "+top+";} 100%{transform:rotateZ("+minang2+"deg);transform-origin: -"+minuteLeft+" "+top+";}}",style.rules.length);$(".minute span.current").removeClass("current");next.addClass("current");mini++;if(mini>60){mini=1;}}

var minText=$(".minute span.current").text();if((secText=="0秒"||secText=="零秒"||secText=="0 s")&&(minText=="0分"||minText=="零分"||minText=="0 m")){var hourang1=15*(houri-1);var hourang2=15*houri;var next=$(".hour span.current").next();if(next.text()==""){next=$(".hour span").first();}

$(".hour").css("animation","hourRun"+houri+" 0.5s ease-in-out");$(".hour").css("animation-fill-mode","forwards");style.insertRule("@keyframes hourRun"+houri+" {0%{transform: rotateZ("+hourang1+"deg);transform-origin: -"+hourLeft+" "+top+";} 100%{transform:rotateZ("+hourang2+"deg);transform-origin: -"+hourLeft+" "+top+";}}",style.rules.length);$(".hour span.current").removeClass("current");next.addClass("current");houri++;if(houri>24){houri=1;}}

var hourText=$(".hour span.current").text();if((secText=="0秒"||secText=="零秒"||secText=="0 s")&&(minText=="0分"||minText=="零分"||minText=="0 m")&&isShichen(hourText)){var shichenang1=30*(shicheni-1);var shichenang2=30*shicheni;var next=$(".shichen span.current").next();if(next.text()==""){next=$(".shichen span").first();}

$(".shichen").css("animation","shichenRun"+shicheni+" 0.5s ease-in-out");$(".shichen").css("animation-fill-mode","forwards");style.insertRule("@keyframes shichenRun"+shicheni+" {0%{transform: rotateZ("+shichenang1+"deg);transform-origin: -"+shichenLeft+" "+top+";} 100%{transform:rotateZ("+shichenang2+"deg);transform-origin: -"+shichenLeft+" "+top+";}}",style.rules.length);$(".shichen span.current").removeClass("current");next.addClass("current");shicheni++;if(shicheni>30){shicheni=1;}}

if((secText=="0秒"||secText=="零秒"||secText=="0 s")&&(minText=="0分"||minText=="零分"||minText=="0 m")&&(hourText=="0时"||hourText=="零时"||hourText=="0 h")){var weekang1=(360/7)*(weeki-1);var weekang2=(360/7)*weeki;var dayang1=(360/Time.days.length)*(dayi-1);var dayang2=(360/Time.days.length)*dayi;console.log(dayang1);var nextweek=$(".week span.current").next();var nextday=$(".day span.current").next();if(nextweek.text()==""){nextweek=$(".week span").first();}

if(nextday.text()==""){nextday=$(".day span").first();}

$(".week").css("animation","weekRun"+weeki+" 0.5s ease-in-out");$(".week").css("animation-fill-mode","forwards");style.insertRule("@keyframes weekRun"+weeki+" {0%{transform: rotateZ("+weekang1+"deg);transform-origin: -"+weekLeft+" "+top+";} 100%{transform:rotateZ("+weekang2+"deg);transform-origin: -"+weekLeft+" "+top+";}}",style.rules.length);$(".day").css("animation","dayRun"+dayi+" 0.5s ease-in-out");$(".day").css("animation-fill-mode","forwards");style.insertRule("@keyframes dayRun"+dayi+" {0%{transform: rotateZ("+dayang1+"deg);transform-origin: -"+dayLeft+" "+top+";} 100%{transform:rotateZ("+dayang2+"deg);transform-origin: -"+dayLeft+" "+top+";}}",style.rules.length);$(".week span.current").removeClass("current");nextweek.addClass("current");weeki++;if(weeki>7){weeki=1;}

$(".day span.current").removeClass("current");nextday.addClass("current");dayi++;if(dayi>Time.days.length){dayi=1;}}

var dayText=$(".day span.current").text();if((dayText=="1 day"||dayText==numToSimp(1)+"日"||dayText==numToTrad(1)+"日"||dayText=="1日")&&(secText=="0秒"||secText=="零秒"||secText=="0 s")&&(minText=="0分"||minText=="零分"||minText=="0 m")&&(hourText=="0时"||hourText=="零时"||hourText=="0 h")){var monthang1=30*(monthi-1);var monthang2=30*monthi;var next=$(".month span.current").next();if(next.text()==""){next=$(".month span").first();}

$(".month").css("animation","monthRun"+monthi+" 0.5s ease-in-out");$(".month").css("animation-fill-mode","forwards");style.insertRule("@keyframes monthRun"+monthi+" {0%{transform: rotateZ("+monthang1+"deg);transform-origin: -"+monthLeft+" "+top+";} 100%{transform:rotateZ("+monthang2+"deg);transform-origin: -"+monthLeft+" "+top+";}}",style.rules.length);month++;if(month>12)

{month=1;}

$(".day").html("");Time.days=updateDays(type,year,month,1);Time.currentTime.day=getFirstDay(type);$(".main-content .day").append(""+Time.currentTime.day+Time.dayUnit+"");for(const key in Time.days){if(Time.days.hasOwnProperty(key)){const element=Time.days[key];if(element!=Time.currentTime.day){$(".main-content .day").append(""+element+Time.dayUnit+"");}}}

$(".day span").each(function(index,element){$(element).css("animation","day"+index+" 0.5s linear");$(element).css("animation-fill-mode","forwards");style.insertRule("@keyframes day"+index+"{0%{transform: rotateZ(0);transform-origin: -"+dayLeft+" "+top+";}100%{transform:rotateZ("+-(360/Time.days.length)*(index+1)+"deg);transform-origin: -"+dayLeft+" "+top+";}}",style.rules.length);});$(".month span.current").removeClass("current");next.addClass("current");monthi++;if(monthi>12){monthi=1;}}

if(month==1&&(dayText=="1 day"||dayText==numToSimp(1)+"日"||dayText==numToTrad(1)+"日"||dayText=="1日")&&(secText=="0秒"||secText=="零秒"||secText=="0 s")&&(minText=="0分"||minText=="零分"||minText=="0 m")&&(hourText=="0时"||hourText=="零时"||hourText=="0 h")){year++;Time.currentTime.year=getYear(type,year);$(".year span").html(getYear(type,year)+Time.yearUnit);}}});function initTime(Time,type){switch(type){case 0:Time.months=getMonths(0,Time.currentTime.month);Time.days=getdays(0,Time.currentTime.year,Time.currentTime.month,Time.currentTime.day);Time.weeks=getWeeks(0,Time.currentTime.week);Time.hours=getHours(0,Time.currentTime.hour);Time.minutes=getMinutes(0,Time.currentTime.minute);Time.seconds=getSeconds(0,Time.currentTime.second);Time.currentTime.week=Time.weekUnit+getWeek(0,Time.currentTime.week);Time.currentTime.shichen=getShiChen(0,Time.currentTime.hour);Time.shichens=getShiChens(0,Time.currentTime.shichen);break;case 1:Time.months=getMonths(1,Time.currentTime.month);Time.days=getdays(1,Time.currentTime.year,Time.currentTime.month,Time.currentTime.day);Time.weeks=getWeeks(1,Time.currentTime.week);Time.hours=getHours(1,Time.currentTime.hour);Time.minutes=getMinutes(1,Time.currentTime.minute);Time.seconds=getSeconds(1,Time.currentTime.second);Time.currentTime.month=numToSimp(Time.currentTime.month);Time.currentTime.day=numToSimp(Time.currentTime.day);Time.currentTime.week=Time.weekUnit+getWeek(1,Time.currentTime.week);Time.currentTime.shichen=getShiChen(1,Time.currentTime.hour);Time.shichens=getShiChens(1,Time.currentTime.shichen);Time.currentTime.hour=numToSimp(Time.currentTime.hour);Time.currentTime.minute=numToSimp(Time.currentTime.minute);Time.currentTime.second=numToSimp(Time.currentTime.second);Time.currentTime.year=getYear(1,Time.currentTime.year);break;case 2:Time.months=getMonths(2,Time.currentTime.month);Time.days=getdays(2,Time.currentTime.year,Time.currentTime.month,Time.currentTime.day);Time.weeks=getWeeks(2,Time.currentTime.week);Time.hours=getHours(2,Time.currentTime.hour);Time.minutes=getMinutes(2,Time.currentTime.minute);Time.seconds=getSeconds(2,Time.currentTime.second);Time.currentTime.month=numToTrad(Time.currentTime.month);Time.currentTime.day=numToTrad(Time.currentTime.day);Time.currentTime.week=Time.weekUnit+getWeek(2,Time.currentTime.week);Time.currentTime.shichen=getShiChen(2,Time.currentTime.hour);Time.shichens=getShiChens(2,Time.currentTime.shichen);Time.currentTime.hour=numToTrad(Time.currentTime.hour);Time.currentTime.minute=numToTrad(Time.currentTime.minute);Time.currentTime.second=numToTrad(Time.currentTime.second);Time.currentTime.year=getYear(2,Time.currentTime.year);break;case 3:Time.months=getMonths(3,Time.currentTime.month);Time.days=getdays(0,Time.currentTime.year,Time.currentTime.month,Time.currentTime.day);Time.weeks=getWeeks(3,Time.currentTime.week);Time.hours=getHours(3,Time.currentTime.hour);Time.minutes=getMinutes(3,Time.currentTime.minute);Time.seconds=getSeconds(3,Time.currentTime.second);Time.currentTime.month=getMonthEng(Time.currentTime.month);Time.currentTime.week=getWeek(3,Time.currentTime.week);Time.currentTime.shichen=getShiChen(3,Time.currentTime.hour);Time.shichens=getShiChens(3,Time.currentTime.shichen);Time.monthUnit="";Time.dayUnit=" day"

Time.weekUnit=""

Time.hourUnit=" h"

Time.minuteUnit=" m"

Time.secondUnit=" s"

Time.yearUnit=" Year"

break;}}

function getSpace(fontSize,type)

{space={month:0,day:0,week:0,shichen:0,hour:0,minute:0,second:0}

switch(type){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;break;}

return space;}

config.js

var config={'language_type':2,'font_color':'#7F7F7F','pointer_color':'#000000',}

愤怒的不死鸟
关注
抖音罗盘时钟
LIAOJIASONG1024的博客
10-08 6591
***其实很早以前就想发了，很多东西其实并不难，只要多动手动脑就行了，下面直接上代码，其他的自己下去慢慢研究吧！ HTML部分代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=devic...
罗盘时钟——使用html，js，css编写
热门推荐
m0_57202083的博客
09-03 1万+
罗盘效果.html <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="style.
前端实现罗盘时钟(附代码)
最新发布
qq_41981237的博客
08-13 478
朋友想要一个优雅的日历，最好有动效，看起来酷炫，思索片刻。这不是有现成的吗？之前看到一个视频，制作的罗盘时钟效果，看起来还不错，虽然简单，作为练手项目还是不错，来吧！源码还是分享出来，有兴趣的小伙伴拿去练手。效果图。
html5罗盘时钟
06-12
html5 罗盘时钟 使用html5开发 需要使用支持html5的浏览器 或者手机等
罗盘时钟.html
07-24
原生js制作一款在抖音上很火的文字罗盘布局时钟代码。带月份、星期、时分秒圆盘时钟，酷炫效果，
动态时间罗盘html讲解,js实现动态罗盘时钟
weixin_33618737的博客
06-05 1120
HTML:2019年CSS:*{margin:0;padding:0}.main{width: 7.5rem;height: 7.5rem;background: #999;overflow: hidden;position: relative;font-size: 0.14rem;margin: auto;}.page{width: 7.5rem;height: 7.5rem;overflow...
jQuery创意圆形罗盘时钟代码
06-24
该圆形罗盘时钟的设计原理是基于极坐标系，将时间的小时、分钟和秒分别映射到罗盘的特定角度。例如，小时指针指向360度除以12的弧度，分钟指针对应于360度除以60的弧度，秒针则更加频繁地变动。通过计算当前时间对应...
jQuery时钟罗盘.rar
04-02
综上所述，这个jQuery时钟罗盘项目涵盖了前端开发的多个方面，包括HTML结构、CSS样式、JavaScript/jQuery编程、动态效果、时间处理、用户交互和响应式设计等。通过学习这个项目，开发者可以提升自己的前端技能，特别...
jQuery实时节气罗盘时钟代码.zip
07-13
【jQuery实时节气罗盘时钟代码】是一个利用jQuery库创建的互动式节气罗盘时钟项目。这个项目的核心是将传统的时钟与中国的二十四节气相结合，为用户提供一个新颖且富有文化特色的显示时间的方式。它适用于网页设计，...
jquery罗盘时钟代码
02-03
首先，jQuery罗盘时钟的基本原理是利用JavaScript的时间函数获取当前时间，并通过CSS或SVG来创建动态的指针效果，模拟出类似真实罗盘的显示。这里，`index.html`文件是整个应用的入口，它包含了HTML结构和必要的引用...
jQuery实时节气罗盘时钟代码
04-25
总之，【jQuery实时节气罗盘时钟代码】是一个结合了传统文化与现代Web技术的项目，通过学习和理解它的实现，开发者不仅可以掌握jQuery和JavaScript的基本应用，还能了解到如何创建动态的网页动画和特效。同时，对于...
时钟罗盘（HTML时钟罗盘代码，老师发的学习案例）
09-18
时钟罗盘（HTML时钟罗盘代码，老师发的学习案例）
html5罗盘时钟.zip
01-14
html5 时钟显示模板，直接显示当前的时间，还能按照秒自动加时，动画效果也随着时间的变化而变化。动画指向也为当前的时间，罗盘显示，贼帅罗盘时钟
jQuery罗盘时钟代码(炫酷).zip
09-04
jQuery罗盘时钟代码(炫酷).zip
罗盘时钟HTML源码下载
07-09
罗盘时钟
jQuery罗盘时钟代码
05-01
jQuery罗盘时钟代码基于jquery-3.4.1.min.js制作，环形罗盘，时钟动画。
抖音罗盘时钟全前端文件，css html js，参考全网
m0_37997811的博客
01-10 6156
html源码： 旋转时钟 css源码： *{ margin:0; padding:0; background:rgb(111, 245, 93); } html,body{ width:100%; height:100%; overflow: hidden; } #clock { position: relative; wi...
罗盘时钟html
sss20100620的博客
03-18 597
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>小罗盘时钟</title> <style> html{ background: #000; color: #666; font-size: 12px; .
抖音热门罗盘时钟桌面动态壁纸免费下载
在罗盘时钟桌面中，HTML源码可能被用于创建一个动态的网页时钟界面。通过HTML可以定义时钟的外观布局，例如罗盘指针如何随时间变化而移动。此外，还可以通过嵌入CSS和JavaScript代码，进一步增强时钟的功能性和交互...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值