使用vue写一个翻页的时间插件实例代码

目录

• 效果图
• 代码
• 总结

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

效果图

clock

代码

<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>

总结

到此这篇关于使用vue写一个翻页的时间插件的文章就介绍到这了,更多相关vue翻页时间插件内容请搜索易盾网络以前的文章或继续浏览下面的相关文章希望大家以后多多支持易盾网络！