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. 使用 kind 和 Docker 啟動(dòng)本地的 Kubernetes環(huán)境2. idea設(shè)置自動(dòng)導(dǎo)入依賴(lài)的方法步驟3. 解決python中import文件夾下面py文件報(bào)錯(cuò)問(wèn)題4. XML入門(mén)精解之結(jié)構(gòu)與語(yǔ)法5. ASP基礎(chǔ)入門(mén)第八篇（ASP內(nèi)建對(duì)象Application和Session）6. IntelliJ IDEA設(shè)置編碼格式的方法7. IntelliJ IDEA設(shè)置默認(rèn)瀏覽器的方法8. idea自定義快捷鍵的方法步驟9. IntelliJ IDEA設(shè)置條件斷點(diǎn)的方法步驟10. Idea如何去除Mapper警告方法解析
網(wǎng)公網(wǎng)安備