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); })();
作品截圖
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章：
1. python實(shí)現(xiàn)讀取類別頻數(shù)數(shù)據(jù)畫水平條形圖案例2. UDDI FAQs3. CSS可以做的幾個(gè)令你嘆為觀止的實(shí)例分享4. PHP循環(huán)與分支知識(shí)點(diǎn)梳理5. 匹配模式 - XSL教程 - 46. 使用Spry輕松將XML數(shù)據(jù)顯示到HTML頁(yè)的方法7. asp批量添加修改刪除操作示例代碼8. XML入門精解之結(jié)構(gòu)與語(yǔ)法9. 使用css實(shí)現(xiàn)全兼容tooltip提示框10. CSS3實(shí)現(xiàn)動(dòng)態(tài)翻牌效果 仿百度貼吧3D翻牌一次動(dòng)畫特效
網(wǎng)公網(wǎng)安備