目錄

• 效果圖
• 代碼
• 總結

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

效果圖

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);}      }    }    // 執行翻頁操作    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      }    }    // 獲取時間顯示參數    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寫一個翻頁的時間插件的文章就介紹到這了,更多相關vue翻頁時間插件內容請搜索以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持！