js+css3實現(xiàn)炫酷時鐘
本文實例為大家分享了js+css3實現(xiàn)炫酷時鐘的具體代碼，供大家參考，具體內(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. ASP.NET MVC使用Boostrap實現(xiàn)產(chǎn)品展示、查詢、排序、分頁2. ASP.NET MVC使用JSAjaxFileUploader插件實現(xiàn)單文件上傳3. 使用ajax跨域調(diào)用springboot框架的api傳輸文件4. Python dict的常用方法示例代碼5. 使用AJAX實現(xiàn)上傳文件6. Python Matplotlib簡易教程(小白教程)7. PHP數(shù)組操作詳細(xì)解釋8. java中redis增刪查以及清理緩存的案例9. Android實現(xiàn)下載進(jìn)度條效果10. 解決python logging遇到的坑 日志重復(fù)打印問題
網(wǎng)公網(wǎng)安備