<! 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> 
