本文小编为大家详细介绍“如何使用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写一个翻页的时间插件”文章已经介绍完毕，想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会，如果想了解更多相关内容的文章，欢迎关注编程网行业资讯频道。
