您好,登錄后才能下訂單哦!
這篇文章主要介紹了js+css3實(shí)現(xiàn)炫酷時(shí)鐘的案例,具有一定借鑒價(jià)值,需要的朋友可以參考下。希望大家閱讀完這篇文章后大有收獲。下面讓小編帶著大家一起了解一下。
html
<body> <ul id='box'></ul> </body>
css
<style> *{ margin: 0; padding: 0; } body{ background-color: #aaa; } ul{ width: 400px; height: 400px; border: 5px solid skyblue; margin: 100px auto 0 auto; border-radius: 50%; background: radial-gradient(green 50%, yellow 100%);; position: relative; } ul li{ width: 2px; height: 15px; list-style: none; background-color: #fff; position: absolute; left: 199px; transform-origin: center 200px; } h2{ width: 2px; height: 180px; background-color: orange; position: absolute; left: 199px; top:20px; -transition: 1s linear; transform-origin: center 180px; } h3{ width: 6px; height: 160px; background-color: #fff; position: absolute; left: 197px; top:40px; transform-origin: center 160px; border-radius:20%; } h4{ width: 8px; height: 140px; background-color: #fff; position: absolute; left: 196px; top:60px; transform-origin: center 140px; transform: rotate(0deg); border-radius: 20%; } h5{ width: 30px; height: 30px; position: absolute; left: 185px; top:185px; border-radius: 50%; background-color: orange; } span{ display: inline-block; width: 20px; height: 20px; line-height: 20px; text-align: center; font-size: 24px; position: absolute; left: -10px; top: 28px; color: #fff; } </style>
js
(function(){ var oUl=document.getElementById('box'); var timer=null; for(var i=0,j=0;i<60;i++,j+=6){ var oLi=document.createElement('li'); oLi.style.transform='rotate('+j+'deg)'; if(i%5==0){ oLi.style.height='20px'; var oSpan=document.createElement('span'); oSpan.style.transform='rotate('+(-j)+'deg)'; if(i==0){ oSpan.innerHTML='12'; oSpan.style.fontSize='30px'; oSpan.style.left='-17px'; }else{ oSpan.innerHTML=parseInt(i/5); if(i%15==0){ oSpan.style.fontSize='36px'; } } oLi.appendChild(oSpan); } if(i==0){ var oH1=document.createElement('h2'); var oH2=document.createElement('h3'); var oH3=document.createElement('h4'); var oH4=document.createElement('h5'); oUl.appendChild(oH1); oUl.appendChild(oH2); oUl.appendChild(oH3); oUl.appendChild(oH4); } oUl.appendChild(oLi); } var oH=document.getElementsByTagName('h4')[0]; var oM=document.getElementsByTagName('h3')[0]; var oS=document.getElementsByTagName('h2')[0]; timer=setInterval(function(){ var now = new Date(); var s=now.getSeconds(); var m=now.getMinutes()+s/60; var h=now.getHours()+m/60; oS.style.transform='rotate('+s*6+'deg)'; oM.style.transform='rotate('+m*6+'deg)'; oH.style.transform='rotate('+(h%12)*30+'deg)'; },30); })();
作品截圖
感謝你能夠認(rèn)真閱讀完這篇文章,希望小編分享js+css3實(shí)現(xiàn)炫酷時(shí)鐘的案例內(nèi)容對(duì)大家有幫助,同時(shí)也希望大家多多支持億速云,關(guān)注億速云行業(yè)資訊頻道,遇到問(wèn)題就找億速云,詳細(xì)的解決方法等著你來(lái)學(xué)習(xí)!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。