目錄

• 效果圖
• 代碼
• 總結(jié)

讀秒效果有一個從上向下的翻頁效果

效果圖

clock

代碼

<template>  <div>    <div>      <p>{{dateToday}}</p>      <span>{{$t(weekDay)}}</span>    </div>    <div>      <div :class="timeLab==="AM"?"labelTip amstyle":"labelTip pmstyle""><span>{{timeLab}}</span>      </div>      <div :class="timeLab==="AM"?"flip amcolor":"flip pmcolor""><span></span><span></span><div     :data-number="nextTimes[0]"></div><div     :data-number="nowTimes[0]"></div>      </div>      <div :class="timeLab==="AM"?"flip amcolor":"flip pmcolor""><span></span><span></span><div     :data-number="nextTimes[1]"></div><div     :data-number="nowTimes[1]"></div>      </div>      <em :class="timeLab==="AM"?"divider amcolor":"divider pmcolor""> <i></i></em>      <div :class="timeLab==="AM"?"flip amcolor":"flip pmcolor""><span></span><span></span><div     :data-number="nextTimes[2]"></div><div     :data-number="nowTimes[2]"></div>      </div>      <div :class="timeLab==="AM"?"flip amcolor":"flip pmcolor""><span></span><span></span><div     :data-number="nextTimes[3]"></div><div     :data-number="nowTimes[3]"></div>      </div>      <em :class="timeLab==="AM"?"divider amcolor":"divider pmcolor""> <i></i></em>      <div :class="timeLab==="AM"?"flip amcolor":"flip pmcolor""><span></span><span></span><div     :data-number="nextTimes[4]"></div><div     :data-number="nowTimes[4]"></div>      </div>      <div :class="timeLab==="AM"?"flip amcolor":"flip pmcolor""><span></span><span></span><div     :data-number="nextTimes[5]"></div><div     :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);}      }    }    // 執(zhí)行翻頁操作    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 = nowTimesetTimeout(() => {  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      }    }    // 獲取時間顯示參數(shù)    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>

總結(jié)

到此這篇關(guān)于使用vue寫一個翻頁的時間插件的文章就介紹到這了,更多相關(guān)vue翻頁時間插件內(nèi)容請搜索以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持！