js+css3實現炫酷時鐘
本文實例為大家分享了js+css3實現炫酷時鐘的具體代碼，供大家參考，具體內容如下
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); })();
作品截圖
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持好吧啦網。
相關文章：
1. 解決docker與vmware的沖突問題2. Django中的AutoField字段使用3. Python基于jieba, wordcloud庫生成中文詞云4. IntelliJ Idea 2020.1 正式發布,官方支持中文（必看）5. IntelliJ IDEA設置自動提示功能快捷鍵的方法6. asp.net core應用docke部署到centos7的全過程7. Java 3D的動畫展示(Part1-使用JMF)8. Django ORM實現按天獲取數據去重求和例子9. 刪除docker里建立容器的操作方法10. java使用FFmpeg合成視頻和音頻并獲取視頻中的音頻等操作(實例代碼詳解)
網公網安備