动感时钟

最新推荐文章于 2020-04-04 22:28:11 发布

ChicUniqueKing

最新推荐文章于 2020-04-04 22:28:11 发布

阅读量128

点赞数

分类专栏： js以及自定义jquery插件

本文链接：https://blog.csdn.net/weixin_42603985/article/details/83819284

版权

js以及自定义jquery插件专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title>动感时钟</title>
       <script src="js/jquery.min.js"></script>
   </head>
   <style type="text/css">

       *{
       margin:0;
       padding:0;
       }

       body{
           background: #000;
           color:#fff;
           font-size:30px;
       }

       .content{
           width:250px;
           height:600px;
           margin:100px auto;
       }

       .box{
           width:60px;
           height:30px;
           display: inline-block;
       }

       .hour{
           width:60px;
           height:30px;
           line-height:30px;
           overflow: hidden;
           position: relative;
           -webkit-box-reflect: above;
       }
       .h_r{
           left:30px;
           width:15px;
           text-align: center;
           line-height:30px;
           height:300px;
           position: absolute;
       }

       .h_l{
           width:15px;
           text-align: center;
           line-height:30px;
           height:90px;
           position: absolute;
       }
       .num{
           line-height:30px;
           /*border:1px solid #fff;*/
           width:20px;
           height:30px;
           text-align:center;
       }
       .maohao{
           width:15px;
           height:30px;
           position:relative;
           display: inline-block;
           text-align: center;
           line-height: 30px;
       }

       .fuhao{
           position:absolute;
           text-align:center;
           line-height:30px;
           width:15px;
           height:30px;
       }

       .ms{
           width:60px;
           height:30px;
           line-height:30px;
           overflow: hidden;
           position: relative;

       }

       .minutes{
           -webkit-box-reflect: above;
           width:60px;
           height:30px;
           line-height:30px;
       overflow: hidden;
           position: relative;
       }

   </style>
   <body>


       <div class="content">

           <div class="box">
               <div class="hour">
                   <div class="h_l">
                       <div class="num">0</div>
                       <div class="num">1</div>
                       <div class="num">2</div>
                   </div>
                   <div class="h_r">
                       <div class="num">0</div>
                       <div class="num">1</div>
                       <div class="num">2</div>
                       <div class="num">3</div>
                       <div class="num">4</div>
                       <div class="num">5</div>
                       <div class="num">6</div>
                       <div class="num">7</div>
                       <div class="num">8</div>
                       <div class="num">9</div>
                   </div>
               </div>
           </div>
           <div class="maohao">
               <div class="fuhao">:</div>
           </div>
           <div class="box">
               <div class="minutes">
                   <div class="h_l">
                       <div class="num">0</div>
                       <div class="num">1</div>
                       <div class="num">2</div>
                       <div class="num">3</div>
                       <div class="num">4</div>
                       <div class="num">5</div>
                   </div>
                   <div class="h_r">
                       <div class="num">0</div>
                       <div class="num">1</div>
                       <div class="num">2</div>
                       <div class="num">3</div>
                       <div class="num">4</div>
                       <div class="num">5</div>
                       <div class="num">6</div>
                       <div class="num">7</div>
                       <div class="num">8</div>
                       <div class="num">9</div>
                   </div>
               </div>

           </div>
           <div class="maohao">
               <div class="fuhao">:</div>
           </div>
           <div class="box">
               <div class="ms">
                   <div class="h_l">
                       <div class="num">0</div>
                       <div class="num">1</div>
                       <div class="num">2</div>
                       <div class="num">3</div>
                       <div class="num">4</div>
                       <div class="num">5</div>
                   </div>
                   <div class="h_r">
                       <div class="num">0</div>
                       <div class="num">1</div>
                       <div class="num">2</div>
                       <div class="num">3</div>
                       <div class="num">4</div>
                       <div class="num">5</div>
                       <div class="num">6</div>
                       <div class="num">7</div>
                       <div class="num">8</div>
                       <div class="num">9</div>
                   </div>
               </div>
           </div>
       </div>

       
       <script type="text/javascript">

           //秒的参数
           var i=1;
           var x =1;
           //分钟的参数
           var y=3;
           var z =1;
           //小时的参数；
           var a =2;
           var b=2;
           //定位移动距离
           var bs =30;
           //获取当前的事件
       var d =new Date()
       var h=d.getHours();
       var m=d.getMinutes();
       var s=d.getSeconds();
       var h_new =h+"";
       var m_new =m+"";
       var s_new =s+"";
       //初始化小时
           if(h_new.length==1){
           b=0;
           a=h_new
           }else{
           var array5 =h_new.substr(0,1);
           var array6 =h_new.substr(1,1);
           b=parseInt(array5);
           a=parseInt(array6);
       }
       //初始化分钟
           if(m_new.length==1){
           z=0;
           y=m_new;
           }else{
           var array1 =m_new.substr(0,1);
           var array2 =m_new.substr(1,1);
           z=parseInt(array1);
           y=parseInt(array2);
       }
       //初始化秒
       if(s_new.length==1){
           x=0;
           i=s_new;
       }else{
           var array3 =s_new.substr(0,1);
           var array4 =s_new.substr(1,1);
           console.log(array3);
           console.log(array4);
           x=parseInt(array3);
           i=parseInt(array4);
       }
           $(".hour").find(".h_l").animate({top:-bs*b});

           $(".hour").find(".h_r").animate({top:-bs*a});

           $(".minutes").find(".h_l").animate({top:-bs*z});

           $(".minutes").find(".h_r").animate({top:-bs*y});

           $(".ms").find(".h_l").animate({top:-bs*x});

           $(".ms").find(".h_r").animate({top:-bs*i});
           //定时器时间自动向前
           setInterval(function(){
               if(i>=10){
                   i=0;
                   x++;
                   if(x>=6){
                       x=0;
                       y++;
                       if(y>=10){
                           y=0;
                           z++;
                           if(z>=6){
                               z=0;
                               a++;
                               if(b<2){
                               if(a>=10){
                                   a=0;
                                   b++;
                               }else{
                                   if(a>=5){
                                       a=0;
                                       b++;
                                   }
                               }
                               if(b>=3){
                                   b=0;
                               }
                                   $(".hour").find(".h_l").animate({top:-bs*b});
                               }
                               $(".hour").find(".h_r").animate({top:-bs*a});
                           }
                           $(".minutes").find(".h_l").animate({top:-bs*z});
                       }
                       $(".minutes").find(".h_r").animate({top:-bs*y});
                   }
                   $(".ms").find(".h_l").animate({top:-bs*x});
               }
               $(".ms").find(".h_r").animate({top:-bs*i});
               i++;
           },1000);
       </script>
       /**
       * @Date 2018年11月7日 @author ChicUniqueKing
       */
   </body>
</html>