欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

js+css3实现炫酷时钟

程序员文章站 2023-02-16 23:41:03
本文实例为大家分享了js+css3实现炫酷时钟的具体代码,供大家参考,具体内容如下html

    本文实例为大家分享了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);
    
        })();

    作品截图

    js+css3实现炫酷时钟

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

    相关标签: js 时钟