js+css3實(shí)現(xiàn)炫酷時(shí)鐘
本文實(shí)例為大家分享了js+css3實(shí)現(xiàn)炫酷時(shí)鐘的具體代碼，供大家參考，具體內(nèi)容如下
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; } h1{width: 2px;height: 180px;background-color: orange;position: absolute;left: 199px;top:20px;-transition: 1s linear;transform-origin: center 180px; } h2{width: 6px;height: 160px;background-color: #fff;position: absolute;left: 197px;top:40px;transform-origin: center 160px;border-radius:20%; } h3{width: 8px;height: 140px;background-color: #fff;position: absolute;left: 196px;top:60px;transform-origin: center 140px;transform: rotate(0deg);border-radius: 20%; } h4{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(’h1’); var oH2=document.createElement(’h2’); var oH3=document.createElement(’h3’); var oH4=document.createElement(’h4’); oUl.appendChild(oH1); oUl.appendChild(oH2); oUl.appendChild(oH3); oUl.appendChild(oH4);}oUl.appendChild(oLi); } var oH=document.getElementsByTagName(’h3’)[0]; var oM=document.getElementsByTagName(’h2’)[0]; var oS=document.getElementsByTagName(’h1’)[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); })();
作品截圖
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章：
1. PHP session反序列化漏洞超詳細(xì)講解2. 得到XML文檔大小的方法3. ASP基礎(chǔ)知識Command對象講解4. ASP刪除img標(biāo)簽的style屬性只保留src的正則函數(shù)5. PHP循環(huán)與分支知識點(diǎn)梳理6. ASP實(shí)現(xiàn)加法驗(yàn)證碼7. 詳細(xì)分析css float 屬性以及position:absolute 的區(qū)別8. PHP設(shè)計(jì)模式中工廠模式深入詳解9. jsp+servlet簡單實(shí)現(xiàn)上傳文件功能（保存目錄改進(jìn)）10. CSS可以做的幾個(gè)令你嘆為觀止的實(shí)例分享
網(wǎng)公網(wǎng)安備