读秒效果有一个从上向下的翻页效果
效果图

代码

<template>
  <div class="dateClock">
    <div class="todayClass">
      <p class="datep">{{dateToday}}</p>
      <span style="float:right;font-size:16px">{{$t(weekDay)}}</span>

    </div>
    <div class="clock">
      <div :class="timeLab==='AM'?'labelTip amstyle':'labelTip pmstyle'">
        <span>{{timeLab}}</span>
      </div>

      <div :class="timeLab==='AM'?'flip amcolor':'flip pmcolor'">
        <span class="rightline"></span>
        <span class="leftline"></span>
        <div class="digital front"
             :data-number="nextTimes[0]"></div>
        <div class="digital back"
             :data-number="nowTimes[0]"></div>
      </div>
      <div :class="timeLab==='AM'?'flip amcolor':'flip pmcolor'">
        <span class="rightline"></span>
        <span class="leftline"></span>
        <div class="digital front"
             :data-number="nextTimes[1]"></div>
        <div class="digital back"
             :data-number="nowTimes[1]"></div>
      </div>
      <em :class="timeLab==='AM'?'divider amcolor':'divider pmcolor'"> <i class="iconfont icon-dian"></i></em>
      <div :class="timeLab==='AM'?'flip amcolor':'flip pmcolor'">
        <span class="rightline"></span>
        <span class="leftline"></span>
        <div class="digital front"
             :data-number="nextTimes[2]"></div>
        <div class="digital back"
             :data-number="nowTimes[2]"></div>
      </div>
      <div :class="timeLab==='AM'?'flip amcolor':'flip pmcolor'">
        <span class="rightline"></span>
        <span class="leftline"></span>
        <div class="digital front"
             :data-number="nextTimes[3]"></div>
        <div class="digital back"
             :data-number="nowTimes[3]"></div>
      </div>

      <em :class="timeLab==='AM'?'divider amcolor':'divider pmcolor'"> <i class="iconfont icon-dian"></i></em>
      <div :class="timeLab==='AM'?'flip amcolor':'flip pmcolor'">
        <span class="rightline"></span>
        <span class="leftline"></span>
        <div class="digital front"
             :data-number="nextTimes[4]"></div>
        <div class="digital back"
             :data-number="nowTimes[4]"></div>
      </div>
      <div :class="timeLab==='AM'?'flip amcolor':'flip pmcolor'">
        <span class="rightline"></span>
        <span class="leftline"></span>
        <div class="digital front"
             :data-number="nextTimes[5]"></div>
        <div class="digital back"
             :data-number="nowTimes[5]"></div>
      </div>

    </div>
  </div>
</template>

<script>
import {
  defineAsyncComponent,
  defineComponent,
  getCurrentInstance,
  onMounted,
  reactive,
  toRefs,
} from "vue";
import DateUtil from "@/utils/dateUtil";
export default {
  setup() {
    const { proxy } = getCurrentInstance();
    const data = reactive({
      nowTimes: [],
      nextTimes: [],
      timer: {},
      timeLab: 'AM',
      dateToday: '',
      weekDay: '',
      timeKey: 0
    });
    onMounted(() => {
      initDate();
      data.timer = setInterval(() => {
        updateTime();
      }, 1000)
    });

    const initDate = async () => {
      let now = new Date();
      data.dateToday = proxy.$moment(now).format('MMM D, YYYY')
      let nowWeek = now.getDay()
      data.weekDay = DateUtil.returnWeek()[nowWeek]
      data.nowTimes = getTimeFromDate(new Date(now.getTime() - 1000));
      data.nextTimes = getTimeFromDate(now)
    }
    const updateTime = () => {
      let now = new Date();
      data.timeKey = now
      let nowTimes = getTimeFromDate(new Date(now.getTime() - 1000));
      let nextTimes = getTimeFromDate(now);
      data.nowTimes = nowTimes
      // console.log('nowTimes', nowTimes)
      for (let i = 0; i < 6; i++) {
        if (nowTimes[i] !== nextTimes[i]) {
          //  setSpin(i, nowTimes[i], nextTimes[i]);
          setSpin(i, nowTimes, nextTimes);
        }
      }
    }
    // 执行翻页操作
    const setSpin = (index, nowTime, nextTime) => {
      let nodes = document.querySelectorAll(".flip");
      if (nodes.length) {
        nodes[index].classList.add('running');
        //   data.nowTimes.splice(index, 1, nowTime);
        data.nowTimes = nowTime
        setTimeout(() => {
          nodes[index].classList.remove('running');
          //  data.nowTimes.splice(index, 1, nextTime);
          //  data.nextTimes.splice(index, 1, nextTime);

          data.nowTimes = nextTime
          data.nextTimes = nextTime
        }, 800)
      } else {
        clearInterval(data.timer);
        data.timer = null
      }
    }
    // 获取时间显示参数
    const getTimeFromDate = (date) => {
      let numTime = [];
      let timeStr = proxy.$moment(date).format("hh:mm:ss A")
      // let timeStr = proxy.$moment(date).format("hh:mm A")
      data.timeLab = timeStr.split(' ')[1]
      let time1 = timeStr.split(' ')[0].split(':').join("")
      for (let i = 0; i < time1.length; i++) {
        numTime.push(parseInt(time1[i]));
      }
      return numTime
    }
    //销毁

    return {
      ...toRefs(data),
      initDate,
      updateTime,
      setSpin,
      getTimeFromDate,
    };
  }
}

</script>

<style lang="scss" scoped>
.dateClock {
   display: flex;
   .todayClass {
      padding-right: 5px;
      .datep {
         font-size: 30px;
         padding-top: 5px;
      }
   }
   .clock {
      display: flex;
   }
}

.clock .divider {
   font-size: 40px;
   line-height: 47px;
   .iconfont {
      margin-right: 0;
   }
}
.clock .flip {
   position: relative;
   width: 44px;
   height: 60px;
   margin: 2px;
   font-size: 40px;
   line-height: 60px;
   text-align: center;
   background: #ffffff;
   border: 1px solid #b8b8b8;
   border-radius: 4px;

   .leftline {
      position: absolute;
      left: 0;
      top: 26px;
      width: 0;
      height: 8px;
      border: 1px solid #b8b8b8;
      z-index: 5;
   }
   .rightline {
      position: absolute;
      right: 0;
      top: 26px;
      width: 0;
      height: 8px;
      border: 1px solid #b8b8b8;
      z-index: 5;
   }
}
.amcolor {
   color: #ff43a1;
}
.pmcolor {
   color: #1890ff;
}
.labelTip {
   width: 44px;
   height: 60px;
   margin: 2px;
   line-height: 60px;
   text-align: center;
   border-radius: 4px;
   font-size: 16px;
   font-weight: bold;
   color: #fff;
}
.amstyle {
   background-color: #ff43a1;
}
.pmstyle {
   background-color: #1890ff;
}
.clock .flip .digital::before,
.clock .flip .digital::after {
   position: absolute;
   content: attr(data-number);
   left: 0;
   right: 0;
   background: #fff;
   overflow: hidden;
   -webkit-perspective: 160px;
   perspective: 160px;
}
.clock .flip .digital::before {
   top: 0;
   bottom: 50%;
   border-bottom: 1px solid #fff;
   border-radius: 4px 4px 0 0;
}
.clock .flip .digital::after {
   top: 50%;
   bottom: 0;
   line-height: 0;
   border-radius: 0 0 4px 4px;
   background: linear-gradient(180deg, #ffffff, #ffffff 68%, #e2e2e2);
}
.clock .flip .back::before,
.clock .flip .front::after {
   z-index: 1;
}
.clock .flip .back::after {
   z-index: 2;
}
.clock .flip .front::before {
   z-index: 3;
}
.clock .flip .back::after {
   -webkit-transform-origin: center top;
   transform-origin: center top;
   -webkit-transform: rotateX(0.5turn);
   transform: rotateX(0.5turn);
}
.clock .flip.running .front::before {
   -webkit-transform-origin: center bottom;
   transform-origin: center bottom;
   -webkit-animation: frontFlipDown 1s ease-in-out;
   animation: frontFlipDown 1s ease-in-out;
   -webkit-backface-visibility: hidden;
   backface-visibility: hidden;
}
.clock .flip.running .back::after {
   -webkit-animation: backFlipDown 1s ease-in-out;
   animation: backFlipDown 1s ease-in-out;
}
@-webkit-keyframes frontFlipDown {
   to {
      -webkit-transform: rotateX(0.5turn);
      transform: rotateX(0.5turn);
   }
}
@keyframes frontFlipDown {
   to {
      -webkit-transform: rotateX(0.5turn);
      transform: rotateX(0.5turn);
   }
}
@-webkit-keyframes backFlipDown {
   to {
      -webkit-transform: rotateX(0);
      transform: rotateX(0);
   }
}
@keyframes backFlipDown {
   to {
      -webkit-transform: rotateX(0);
      transform: rotateX(0);
   }
}
</style>