建站资讯

励帆微信小程序开发_js+css3完成炫酷时钟

作者:admin 发布时间:2021-01-05
js+css3实现炫酷时钟       这篇文章主要为大家详细介绍了js+css3实现炫酷时钟,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

本文实例为大家分享了js+css3实现炫酷时钟的具体代码,供大家参考,具体内容如下

html

 body 
 ul id='box' /ul 
 /body 

css

 style 
 margin: 0;
 padding: 0;
 body{
 background-color: #aaa;
 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;
 width: 2px;
 height: 180px;
 background-color: orange;
 position: absolute;
 left: 199px;
 top:20px;
 -transition: 1s linear;
 transform-origin: center 180px;
 width: 6px;
 height: 160px;
 background-color: #fff;
 position: absolute;
 left: 197px;
 top:40px;
 transform-origin: center 160px;
 border-radius:20%;
 width: 8px;
 height: 140px;
 background-color: #fff;
 position: absolute;
 left: 196px;
 top:60px;
 transform-origin: center 140px;
 transform: rotate(0deg);
 border-radius: 20%;
 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 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);
 })();

作品截图

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持凡科。



收缩