酷炫动态代码时钟 向你的女神展示吧
生活随笔
收集整理的這篇文章主要介紹了
酷炫动态代码时钟 向你的女神展示吧
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
效果圖
1. 桌面鼠標(biāo)右鍵 - 新建 - 文本文檔
2. 打開新建的文檔，輸入以下內(nèi)容，保存
<!DOCTYPE html> <html lang="zh"> <head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Clock</title><style>html{background: #000;color: #666;font-size: 12px;overflow:hidden;}*{margin: 0;padding: 0;}span{display: block;float: left;}.on{color: #fff;}.wrapper{width: 4px;height: 200px;position: absolute;left:50%;top:50%;margin-top: -100px;margin-left: -100px;}.wrapper .timebox{position: absolute;width: 200px;height: 200px;top: 0;left: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> </head> <body> <div id="wrapper"><div class="timebox monthbox" id="monthBox"></div><div class="timebox dateBox" id="dateBox"></div><div class="timebox hourbox" id="hourbox"></div><div class="timebox minutebox" id="minutebox"></div><div class="timebox secondbox" id="secondbox"></div> </div><script>let wrapper = document.getElementById("wrapper");let monthBox = document.getElementById("monthBox");let dateBox = document.getElementById("dateBox");let hourbox = document.getElementById("hourbox");let minutebox = document.getElementById("minutebox");let secondbox = document.getElementById("secondbox");let findSiblings = ( 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 = ( tag ) => {let sb = findSiblings( tag );for(let i=0 ; i <= sb.length-1 ; i++){sb[i].className = "";}};// initial Monthlet initMonth = () => {for(let i=1; i<=12; i++){let span = document.createElement("span");span.innerHTML = i+"月";monthBox.appendChild( span );}};// initial Datelet initDate = () => {for(let i=1; i<=31; i++){let span = document.createElement("span");span.innerHTML = i+"日";dateBox.appendChild( span );}};let initHour = () => {for(let i=0; i<=23; i++){let h = i ;let span = document.createElement("span");if( h<10){h="0"+h;}span.innerHTML = h +"點(diǎn)";hourbox.appendChild( span );}};let initMinute = () => {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 = () => {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 = (tag) => {tag.className = "on";removeSiblingClass( tag );};// let initRili = () => {initMonth();initDate();initHour(); initMinute();initSecond();};let showNow = ( mydate ) => {let month = mydate.getMonth() ;let date = mydate.getDate();let hour = mydate.getHours() ;let minute = mydate.getMinutes();let second = mydate.getSeconds();changeTime( monthBox.children[month] );changeTime( dateBox.children[date-1] );changeTime( hourbox.children[hour] );changeTime( minutebox.children[minute] );changeTime( secondbox.children[second] );};let textRound = (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 = (tag , deg) => {tag.style.transform = "rotate("+deg+"deg)";};let timeRun = () => {initRili();setInterval(() => {let mydate = new Date();showNow( mydate );},1000);setTimeout(() => {wrapper.className = "wrapper";textRound(monthBox,12,40);textRound(dateBox,31,80);textRound(hourbox,24,120);textRound(minutebox,60,160);textRound(secondbox,60,200);setInterval(() => {let mydate = new Date();rotateTag( monthBox , -30*mydate.getMonth());rotateTag( dateBox , -360/31*(mydate.getDate()-1) );rotateTag( hourbox , -360/24*mydate.getHours());rotateTag( minutebox , -6*mydate.getMinutes());rotateTag( secondbox , -6*mydate.getSeconds());},1000)},0)};timeRun(); </script></body> </html>3. 文件重命名，修改為CodeClock.html
4. 雙擊打開CodeClock.html文件，出現(xiàn)效果圖
總結(jié)
以上是生活随笔為你收集整理的酷炫动态代码时钟 向你的女神展示吧的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： easyphp mysql_EasyPH
- 下一篇： html画布创建黑白象棋棋盘,Canva