js+css3实现炫酷时钟

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

html

css

      *{
 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;
      }

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

    })();

作品截图

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持考高分网。