JS实现时钟翻牌效果的方法是什么

本文实例为大家分享了js实现带翻转动画图片时钟的具体代码，供大家参考，具体内容如下

首先上图，先看效果

1、需求

根据当前系统时间来更改这个时钟，更改时间时，数字向上翻动，转成下一个数字。

2、编程思路

如果只是根据系统时间来更改图片的话，其实很简单，就是获得每个数字图片的dom，获得当前系统时间，然后更改其src为指定数字图片就可以了。但是这边想要加入这个反转动画，我们可以指定一个窗口，高度为一个数字图片的大小，再检测到时间变化时，我们在指定的数字图片后加入我们想要改变的数字图片结点，之后设置一个定时器用很小的时间不断向上移动，这样就能出这个上翻的动画效果，等上升了一个数字图片高度之后，删除上面的第一个结点。由此往复，即可实现。

3、代码实现

!doctype html>
    
html lang="en">
    
head>
    
  meta charset="utf-8">
    
  title>
    title/title>
    
/head>
    
style>

  *{
    
    padding: 0;
    
    margin: 0;

  }

  .number{
    
    height: 70px;
    
    overflow: hidden;
    
    float: left;

  }

  .number img{
    
    display: block;

  }
    
/style>
    
body>
    

div>
    
  div id="shi1" class="number">
    
    img src="img/0.jpg" />
    
  /div>
    
  div id="shi2" class="number">
    
    img src="img/0.jpg" />
    
  /div>
    
  div class="number">
    
    img src="img/c.jpg" />
    
  /div>
    
  div id="fen1" class="number">
    
    img src="img/0.jpg" />
    
  /div>
    
  div id="fen2" class="number">
    
    img src="img/0.jpg" />
    
  /div>
    
  div class="number">
    
    img src="img/c.jpg" />
    
  /div>
    

  div id="miao1" class="number">
    
    img src="img/0.jpg" />
    
  /div>
    
  div id="miao2" class="number">
    
    img src="img/0.jpg" />
    
  /div>
    

/div>
    

script>
    

  var shi1d = document.getelementbyid('shi1');
    
  var shi2d = document.getelementbyid('shi2');
    
  var fen1d = document.getelementbyid('fen1');
    
  var fen2d = document.getelementbyid('fen2');
    
  var miao1d = document.getelementbyid('miao1');
    
  var miao2d = document.getelementbyid('miao2');


  function gettime() {
    
    var mydate = new date();

    var mytime=mydate.tolocalestring('chinese', {
 hour12: false }
    );
    
    //获得时间格式为2020/12/30 18:54:39 第一个split(' ')[1]获得18:54:39这个字符串，在对其.split('')获得[1,8,:,5,4,:,3,9]这个数组
    //由此得到,time[0]time[1]为小时，time[3]time[4]为分钟，time[6]time[7]为秒
    time = mytime.split(' ')[1].split('');
    
    // console.log(time);
    
    return new array(time[0],time[1],time[3],time[4],time[6],time[7]);

  }
    

  var h1=0,h2=0,f1=0,f2=0,m1=0,m2=0;
    

  //更新小时1
  var ht1=0;

  setinterval(function () {
    
    var a = gettime();

    if (a[0]!=h1){
    
      h1=a[0];
    
      //获得当前的子结点
      var childimg = shi1d.getelementsbytagname('img')[0];
    
      var imgm = document.createelement('img');
    
      imgm.src='img/'+h1+'.jpg';
    
      shi1d.appendchild(imgm);

      var s1 = setinterval(function () {
    
        ht1+=1;
    
        shi1d.scrolltop=ht1;
    
        if (ht1>
=70){
    
          clearinterval(s1);

          settimeout(function () {
    
            childimg.remove();
    
            ht1=0;

          }
,100)
        }

      }
,1)
    }

  }
    ,1000);
    
  //更新小时2
  var ht2=0;

  setinterval(function () {
    
    var a = gettime();

    if(a[1]!=h2){
    
      h2=a[1];
    
      //获得当前的子结点
      var childimg = shi2d.getelementsbytagname('img')[0];
    
      var imgm = document.createelement('img');
    
      imgm.src='img/'+h2+'.jpg';
    
      shi2d.appendchild(imgm);

      var m2 = setinterval(function () {
    
        ht2+=1;
    
        shi2d.scrolltop=mt1;
    
        if (ht2>
=70){
    
          clearinterval(m2);

          settimeout(function () {
    
            childimg.remove();
    
            ht2=0;

          }
,100)
        }

      }
,1)
    }

  }
    ,1000);
    
  //更新分钟1
  var ft1=0;

  setinterval(function () {
    
    var a = gettime();

    if (a[2]!=f1){
    
      f1=a[2];
    
      //获得当前的子结点
      var childimg = fen1d.getelementsbytagname('img')[0];
    
      var imgm = document.createelement('img');
    
      imgm.src='img/'+f1+'.jpg';
    
      fen1d.appendchild(imgm);

      var m2 = setinterval(function () {
    
        ft1+=1;
    
        miao1d.scrolltop=ft1;
    
        if (ft1>
=70){
    
          clearinterval(m2);

          settimeout(function () {
    
            childimg.remove();
    
            ft1=0;

          }
,100)
        }

      }
,1)
    }


  }
    ,1000);
    
  //更新分钟2
  var ft2=0;

  setinterval(function () {
    
    var a = gettime();

    if (a[3]!=f2){
    
      f2=a[3];
    
      //获得当前的子结点
      var childimg = fen2d.getelementsbytagname('img')[0];
    
      var imgm = document.createelement('img');
    
      imgm.src='img/'+f2+'.jpg';
    
      fen2d.appendchild(imgm);

      var m2 = setinterval(function () {
    
        ft2+=1;
    
        fen2d.scrolltop=ft2;
    
        if (ft2>
=70){
    
          clearinterval(m2);

          settimeout(function () {
    
            childimg.remove();
    
            ft2=0;

          }
,100)
        }

      }
,1)
    }


  }
    ,1000);
    
  //更新秒1
  var mt1=0;

  setinterval(function () {
    
    var a = gettime();

   if (a[4]!=m1){
    
     m1=a[4];
    
     //获得当前的子结点
     var childimg = miao1d.getelementsbytagname('img')[0];
    
     var imgm = document.createelement('img');
    
     imgm.src='img/'+m1+'.jpg';
    
     miao1d.appendchild(imgm);

     var m2 = setinterval(function () {
    
       mt1+=1;
    
       miao1d.scrolltop=mt1;
    
       if (mt1>
=70){
    
         clearinterval(m2);

         settimeout(function () {
    
           childimg.remove();
    
           mt1=0;

         }
,100)
       }

     }
,1)
   }

  }
    ,1000);
    
  //更新秒2
  var mt2=0;

  setinterval(function () {
    
    var a = gettime();
    
    //获得当前的子结点
    var childimg = miao2d.getelementsbytagname('img')[0];
    
    // miao2d.src='img/'+a[5]+'.jpg'
    var imgm = document.createelement('img');
    
    imgm.src='img/'+a[5]+'.jpg';
    
    miao2d.appendchild(imgm);

    var m2 = setinterval(function () {
    
      mt2+=1;
    
      // console.log(mt2);
    
      miao2d.scrolltop=mt2;
    
      if (mt2>
=70){
    
        clearinterval(m2);

        settimeout(function () {
    
          childimg.remove();
    
          mt2=0;

        }
,100)
      }

    }
,1)

  }
    ,1000);
    
/script>
    

/body>
    
/html>
    

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！