翻页时钟更改版持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第11天，点击查看活动详情写这一篇

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第11天，点击查看活动详情

写这一篇是因为我的评论区有人提了一下，刚好今天没写文章，那么就来浅浅更改一下
后面如果有新的想法再在这一篇进行更新(＾－＾)V

一、向下翻页式

我们本来使用的是向上翻页式，那么如何给它改成向下翻页呢？

分析过程

只需要去改变翻动的函数，本来是让下面前面以上面为旋转轴的从0°-90°翻转，上面后面的以下面为旋转轴从270°-360°翻转,这样的话旋转是向上的同时保证下面翻上去的时候为旧时间，上面继续向上翻时显示出来为新时间
那么如果改变旋转方向现在只需要改为前面上面的以下面为旋转轴由0°--90°旋转，下面后面的以上面为旋转轴由90°-0°旋转

修改旋转函数

由于只是改变旋转的主角和旋转的角度，所以我们一整个框架都是不变的
那么就是修改，旋转的个体，和旋转的角度，我把过程都加注释说明了一下

//翻转前面上面的盒子向下旋转0到-180°
const rotateUp = (ele,time, n) => {
  //传入的为一开始翻转的元素，即前面上面的盒子，以及新时间，以及第几个li盒子
  let rotateDeg = 0;
  //保证这个旋转的盒子在最前面
  ele.style.zIndex=50;
  //所有下面的盒子
  const allDownBox =  document.querySelector(`li:nth-child(${n})`).querySelectorAll('.downBox');
  //所有前面的盒子
  const beforeTime = document.querySelector(`li:nth-child(${n})`).querySelectorAll('.beforeTime');
  // 让下面后面的盒子先不可见，然后设置为90°
  allDownBox[1].style.display = 'none';
  allDownBox[1].transform = `rotateX(90deg)`;
  const animation = () => {
  //每一次减少3°，当它旋转180°就差不多一秒
    rotateDeg-=3;
    ele.style.transform = `perspective(500px) rotateX(${rotateDeg}deg)`;
    if(rotateDeg == -90) {
      //让它更新为最近时间后隐藏
      ele.innerHTML = time
      ele.style.zIndex = -1;
      //让刚刚隐藏的盒子重新显示出来并且完成90°-0°的旋转
      allDownBox[1].style.display = 'block';
      //尽量保存旋转的个体在最前面
      allDownBox[1].style.zIndex = 100;
      //让它从90°-0°旋转
      rotateDown(allDownBox[1])
    }
    //当旋转到-150°的时候将下面的盒子赋为新值，保持能够一直更替新旧值
    if(rotateDeg == -150) {
      beforeTime[1].innerHTML = time
    }
    //旋转到-180°
    if(rotateDeg > -180) {
      requestAnimationFrame(animation);
    }
  }
  animation()
}

实现的代码和图有一点不一样，就是被隐藏的代码其实我是让它一直旋转到了-180°而不是-90°
虽然也可以让它不旋转了，改为在下面后面的盒子向下旋转的时候进行判断对下面前面的盒子赋为新值，但是我懒得改啦

翻页时钟更改版

一、向下翻页式

分析过程

修改旋转函数

码上掘金