如何使用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写一个翻页的时间插件”文章已经介绍完毕，想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会，如果想了解更多相关内容的文章，欢迎关注蜗牛博客行业资讯频道。
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：niceseo99@gmail.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
版权声明：如无特殊标注，文章均为本站原创，转载时请以链接形式注明文章出处。
评论