js+css3实现炫酷时钟_JavaScript

js+css3实现炫酷时钟

2021-08-26 15:15Small_Jar JavaScript

这篇文章主要为大家详细介绍了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>

				?

									(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);

									    })();