<! DOCTYPE html > < htmllang = " en" > < head> < metahttp-equiv = " Content-Type" content = " text/html; charset=UTF-8" > < title> </ title> < metaname = " referrer" content = " no-referrer" > < metaname = " renderer" content = " webkit" > < metahttp-equiv = " X-UA-Compatible" content = " IE=Edge" > < metaname = " viewport" content = " width=device-width,initial-scale=1.0,user-scalable=no,minimum-scale=1,maximum-scale=1" > < metaHTTP-EQUIV = " pragma" content = " no-cache" > < metaHTTP-EQUIV = " Cache-Control" content = " no-cache, must-revalidate" > < metaname = " viewport" content = " width=device-width,initial-scale=1,user-scalable=no" > < metaHTTP-EQUIV = " expires" content = " 0" > < metaname = " viewport" content = " width=device-width,initial-scale=1,minimum-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover" /> < metaname = " apple-mobile-web-app-capable" content = " yes" > < metaname = " apple-mobile-web-app-status-bar-style" content = " black" > < metaname = " full-screen" content = " yes" > < metaname = " x5-fullscreen" content = " true" > < metaname = " apple-mobile-web-app-capable" content = " yes" /> < linkhref = " https://fonts.googleapis.com/css2?family=Poppins:wght@600;900&display=swap" rel = " stylesheet" > </ head> < style>
html {
background : #000;
color : #4f4f4f;
font-size : 1em;
overflow : hidden;
font-weight : bold;
}
* {
margin : 0;
padding : 0;
}
span {
display : block;
float : left;
}
.on {
color : #d0d0d0;
}
.wrapper {
width : 200px;
height : 200px;
position : absolute;
left : 50%;
top : 50%;
margin-top : -100px;
margin-left : -100px;
}
.wrapper .timebox {
position : absolute;
width : 200px;
height : 200px;
left : 0;
top : 0;
border-radius : 100%;
transition : all 0.5s;
}
.timebox span {
transition : all 0.5s;
float : left;
}
.wrapper .timebox span {
position : absolute;
left : 50%;
top : 50%;
width : 40px;
height : 18px;
margin-top : -9px;
margin-left : -20px;
text-align : right;
}
</ style> < body> < divid = " wrapper" > < divclass = " timebox nianBox" id = " nianBox" > </ div> < divclass = " timebox yuebox" id = " yueBox" > </ div> < divclass = " timebox riqiBox" id = " riqiBox" > </ div> < divclass = " timebox hourbox" id = " hourbox" > </ div> < divclass = " timebox minutebox" id = " minutebox" > </ div> < divclass = " timebox secondbox" id = " secondbox" > </ div> </ div> < script>
let wrapper = document. getElementById ( "wrapper" ) ;
let nianBox = document. getElementById ( "nianBox" ) ;
let yueBox = document. getElementById ( "yueBox" ) ;
let riqiBox = document. getElementById ( "riqiBox" ) ;
let hourbox = document. getElementById ( "hourbox" ) ;
let minutebox = document. getElementById ( "minutebox" ) ;
let secondbox = document. getElementById ( "secondbox" ) ;
let findSiblings = function ( tag ) {
let parent = tag. parentNode;
let childs = parent. children;
let sb = [ ] ;
for ( let i= 0 ; i <= childs. length- 1 ; i++ ) {
if ( childs[ i] !== tag) {
sb[ sb. length] = childs[ i] ;
}
}
return sb ;
} ;
let removeSiblingClass = function ( tag ) {
let sb = findSiblings ( tag) ;
for ( let i= 0 ; i <= sb. length- 1 ; i++ ) {
sb[ i] . className = "" ;
}
} ;
let initYear = function ( ) {
let date = new Date ( ) ;
let span = document. createElement ( "span" ) ;
span. innerHTML = date. getUTCFullYear ( ) ;
span. className = "on" ;
nianBox. appendChild ( span) ;
} ;
let initMonth = function ( ) {
for ( let i= 1 ; i<= 12 ; i++ ) {
let span = document. createElement ( "span" ) ;
span. innerHTML = i+ "月" ;
yueBox. appendChild ( span) ;
}
} ;
let initDate = function ( ) {
for ( let i= 1 ; i<= 31 ; i++ ) {
let span = document. createElement ( "span" ) ;
span. innerHTML = i+ "日" ;
riqiBox. appendChild ( span) ;
}
} ;
let initHour = function ( ) {
for ( let i= 0 ; i<= 23 ; i++ ) {
let h = i ;
let span = document. createElement ( "span" ) ;
if ( h< 10 ) {
h= "0" + h;
}
span. innerHTML = h + "点" ;
hourbox. appendChild ( span ) ;
}
} ;
let initMinute = function ( ) {
for ( let i= 0 ; i<= 59 ; i++ ) {
let f = i ;
let span = document. createElement ( "span" ) ;
if ( f< 10 ) {
f= "0" + f;
}
span. innerHTML = f + "分" ;
minutebox. appendChild ( span ) ;
}
} ;
let initSecond = function ( ) {
for ( let i= 0 ; i<= 59 ; i++ ) {
let miao = i ;
let span = document. createElement ( "span" ) ;
if ( miao< 10 ) {
miao= "0" + miao;
}
span. innerHTML = miao + "秒" ;
secondbox. appendChild ( span ) ;
}
} ;
let changeTime = function ( tag ) {
tag. className = "on" ;
removeSiblingClass ( tag) ;
} ;
let initRili = function ( ) {
initYear ( ) ;
initMonth ( ) ;
initDate ( ) ;
initHour ( ) ;
initMinute ( ) ;
initSecond ( ) ;
} ;
let showNow = function ( mydate ) {
let yue = mydate. getMonth ( ) ;
let riqi = mydate. getDate ( ) ;
let hour = mydate. getHours ( ) ;
let minute = mydate. getMinutes ( ) ;
let second = mydate. getSeconds ( ) ;
changeTime ( yueBox. children[ yue] ) ;
changeTime ( riqiBox. children[ riqi- 1 ] ) ;
changeTime ( hourbox. children[ hour] ) ;
changeTime ( minutebox. children[ minute] ) ;
changeTime ( secondbox. children[ second] ) ;
} ;
let textRound = function ( tag, num, dis ) {
let span = tag. children ;
for ( let i= 0 ; i<= span. length- 1 ; i++ ) {
span[ i] . style. transform= "rotate(" + ( 360 / span. length) * i+ "deg) translateX(" + dis+ "px)" ;
}
} ;
let rotateTag = function ( tag , deg ) {
tag. style. transform = "rotate(" + deg+ "deg)" ;
} ;
let main = function ( ) {
initRili ( ) ;
setInterval ( function ( ) {
let mydate = new Date ( ) ;
showNow ( mydate) ;
} , 1000 ) ;
wrapper. className = "wrapper" ;
textRound ( nianBox, 4 , 0 ) ;
textRound ( yueBox, 12 , 70 ) ;
textRound ( riqiBox, 31 , 140 ) ;
textRound ( hourbox, 24 , 210 ) ;
textRound ( minutebox, 60 , 280 ) ;
textRound ( secondbox, 60 , 350 ) ;
setInterval ( function ( ) {
let mydate = new Date ( ) ;
rotateTag ( yueBox , - 30 * mydate. getMonth ( ) ) ;
rotateTag ( riqiBox , - 360 / 31 * ( mydate. getDate ( ) - 1 ) ) ;
rotateTag ( hourbox , - 360 / 24 * mydate. getHours ( ) ) ;
rotateTag ( minutebox , - 6 * mydate. getMinutes ( ) ) ;
rotateTag ( secondbox , - 6 * mydate. getSeconds ( ) ) ;
} , 1000 )
} ;
main ( ) ;
</ script> </ body> </ html>
