美文网首页
动画时钟-由浅及深

动画时钟-由浅及深

作者: 云桃桃 | 来源:发表于2019-06-10 19:05 被阅读0次

也是一种思路吧,一步一步写的,js+css3。


动态时钟.gif
  • js
 var block1=document.getElementById("blockBox1");
   var block2=document.getElementById("blockBox2");
   var block3=document.getElementById("blockBox3");

   var blockObj={
       init:function(){
           this.block1Init();
           this.block2Init();
           this.block3Init();
       },
       /**
        * 获取系统时间
        */
       sysBlock1:function(){
           var times=new Date();
           var y=times.getFullYear(),M=times.getMonth()+1,d=times.getDate(),
               h=times.getHours(),m=times.getMinutes(),s=times.getSeconds(),
               w=times.getDay(),weekArr=['日','一','二','三','四','五','六'];
               block1.innerHTML=`今天是${y}年${this.singleNumDeal(M)}月${this.singleNumDeal(d)}日${this.singleNumDeal(h)}时${this.singleNumDeal(m)}分${this.singleNumDeal(s)}秒 星期${weekArr[w]}`;
       },
       block1Init:function () {
           var that=this;
           this.sysBlock1();
           setInterval(function(){
               that.sysBlock1();
           },1000);
       },
       block2Init:function(){
            var that=this;
            this.imgBlock();
            setInterval(function(){
                that.imgBlock();
            },1000);

       },

       block3Init:function(){
           var that=this;
           this.aniBlock();
           setInterval(function(){
               that.aniBlock();
           },1000);

       },

       /**
        * 图片时钟
        */
       imgBlock:function(){
           var times=new Date();
           var h=this.singleNumDeal(times.getHours()),m=this.singleNumDeal(times.getMinutes()),s=this.singleNumDeal(times.getSeconds()),
               timeStr=''+h+':'+m+':'+s,timeStrArr=timeStr.split(''),pointStr='<div class="img-wrapper"><img src="images/digit/point.png"></div>',
               showStr='';
           for(var i=0;i<timeStrArr.length;i++){
               if(timeStrArr[i]==':'){
                   showStr+=pointStr;
               }else{
                   timeStrArr[i]='0'+(timeStrArr[i]-0+1);
                   showStr+=`<div class="img-wrapper"><img src="images/digit/digit_${timeStrArr[i]}.png"></div>`;
               }
           }
           block2.innerHTML=showStr;

       },
       lastTimeObj:'',
       /**
        * 动画时钟
        */
       aniBlock:function(){
           var times=new Date();
           var h=this.singleNumDeal(times.getHours()),m=this.singleNumDeal(times.getMinutes()),s=this.singleNumDeal(times.getSeconds()),
               timeStr=''+h+m+s,timeStrArr=timeStr.split(''),pointStr='<div class="img-wrapper"><img src="images/digit/point.png"></div>',
               showStr='';
               changeNum=0;
            // 判断从哪改变的
           for(var k=0;k<timeStr.length;k++){
                   if(timeStr[k]!=this.lastTimeObj[k]){
                       changeNum=k;
                       break;
                   }
               }
           // 不改变的位置正常循环
           for(var m=0;m<changeNum;m++){
               var curImg=`<img  src="images/digit/digit_${'0'+(timeStrArr[m]-0+1)}.png">`,
                   nextImg=timeStrArr[m]==9?`<img src="images/digit/digit_01.png">`:`<img  src="images/digit/digit_0${(timeStrArr[m]-0+2)}.png">`;
               var pStr='';
               if(m==1 || m==3){
                   pStr=pointStr;
               }
               showStr+=`<div class="img-wrapper">${curImg}${nextImg}</div>${pStr}`;
           }
          //  改变的位置到结束都要有动画
          for(var i=changeNum;i<timeStrArr.length;i++){
               var pStr='';
               if(i==1 || i==3){
                   pStr=pointStr;
               }
              var curImg=`<img class="cur-ani" src="images/digit/digit_${'0'+(timeStrArr[i]-0===0?1:timeStrArr[i]-0)}.png">`,
                  nextImg=`<img class="next-ani" src="images/digit/digit_0${(timeStrArr[i]-0+1)}.png">`;
                  showStr+=`<div class="img-wrapper">${curImg}${nextImg}</div>${pStr}`;
           }
           block3.innerHTML=showStr;
           this.lastTimeObj=timeStr;
       },

       /**
        * 单个数值处理
        * @param num
        */
       singleNumDeal:function (num) {
           var n=num>=10?num:'0'+num;
           return n;
       }

   };

   blockObj.init();
  • css
  #blockBox1{
            text-align: center;
            line-height: 100px;font-size: 40px;}
        .box2{
            width: 800px; margin: 10px auto;height: 135px; overflow: hidden;
        }
        .box2 .img-wrapper{
             width: 90px;
            margin-right: 5px;
            float: left;
        }

       .cur-ani{ animation: ani 1s;}
        .next-ani{animation:bounceInUp 1s;}

        @keyframes bounceInUp {
            0%, 60%, 75%, 90%, 100% {
                animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
            }

            0% {
                opacity: 0;
                transform: translate3d(0, 3000px, 0);
            }

            60% {
                opacity: 1;
                transform: translate3d(0, -20px, 0);
            }

            75% {
                transform: translate3d(0, 10px, 0);
            }

            90% {
                transform: translate3d(0, -5px, 0);
            }

            100% {
                transform: translate3d(0, 0, 0); opacity: 1;
            }
        }
        @keyframes ani {
            from{
                margin-top:0px;
            }
            to{
                margin-top:-135px;
            }
        }
  • html
<div id="blockBox1">
    
</div>


<div id="blockBox2" class="clear box2">
</div>


<div id="blockBox3" class="clear box2">
</div>

相关文章

  • 动画时钟-由浅及深

    也是一种思路吧,一步一步写的,js+css3。动态时钟.gif js css html

  • 由深悟浅

    从前,我们以浅诠释浅。今日懂得,以深理解浅。 万物皆有轮回,深浅亦是。 初始,从浅及深,最终,由深入浅。 ----...

  • 由浅及深读懂LPR

    什么是LPR 12月20日,央行公布了最新的1年期和5年期以上LPR,依旧是4.15%和4.8%。 实际上,在8月...

  • java枚举由浅及深

    结构 这是最简单的声明方式。下面是复杂一些,也是比较普遍使用的方式 常用属性 通过源码可知,每个枚举元素都包含了这...

  • 闻香识女人

    那是让人浮想联翩浪漫的 小溪之花 由深及浅由浅及深 慢慢地散发着她的魅力 它只为一人绽放 那个前世五百年 匍匐前来...

  • Linux设备树由浅及深

    0. 写在前面 1. 深入浅出Device Tree 在设备树之前,板级信息都是通过硬编码的方式编译进内核的, T...

  • 由浅及深,认识小数的计数单位

    之前听了向红老师的《笔算小数加减法》(四年级下册,有了一些关于小数性质的思考,尤其是小数的计算单位应该从什么时候...

  • 时钟动画

    最近项目中用到了一些动画效果,研究的过程中发现挺有意思,那就分享一下喽!首先看一下素材: 下面是实现后的效果: 代...

  • 动画时钟

  • 如梦初醒,如醒入梦

    微风走过的四月 将一片海的呼唤 由深及浅得,由浅及深得 从白云朵里走向另一个白云 蔚蓝的天空 在温和的阳光下 投影...

网友评论

      本文标题:动画时钟-由浅及深

      本文链接:https://www.haomeiwen.com/subject/ybetfctx.html