如何使用vue寫一個翻頁的時間插件

本文小編為大家詳細介紹“如何使用vue寫一個翻頁的時間插件”，內容詳細，步驟清晰，細節處理妥當，希望這篇“如何使用vue寫一個翻頁的時間插件”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學習新知識吧。

代碼

<template>
  <div class="dateClock">
    <div class="todayClass">
      <p class="datep">{{dateToday}}</p>
      <span >{{$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>

讀到這里，這篇“如何使用vue寫一個翻頁的時間插件”文章已經介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會，如果想了解更多相關內容的文章，歡迎關注億速云行業資訊頻道。