js+css3实现炫酷时钟

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

html


    

    css

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

    作品截图

    js+css3实现炫酷时钟_第1张图片

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

    你可能感兴趣的:(js+css3实现炫酷时钟)