效果图
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="dig IT al 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 {
define Async@R_ 360 _480@,
defineComponent,
get current Instance,
on mount ed,
reactive,
toRefs,
} From "vue";
import DateUtil f rom "@/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 = PR oxy.$moment(now).format('MMM D, yy YY')
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(pars ei nt(time1[i]));
}
return numTime
}
//销毁
return {
.. .toRefs(data),
initDate,
updateTime,
setSpin,
getTimeFromDate,
};
}
}
</script>
<style lang="scss" sco PE d>
.dateClock {
dis play : flex;
.todayClass {
padding-right: 5px;
.datep {
font -s ize: 30px;
padding -t op: 5px;
}
}
.clock {
display: flex;
}
}
.clock .divider {
font-size: 40px;
line-height: 47px;
.iconfont {
m arg in-right: 0;
}
}
.clock .flip {
position: relative;
width: 44px;
height: 60px;
mar gin : 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 -i ndex: 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-gra die nt(180 deg , #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 to p;
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翻页时间插件内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持！
您可能感兴趣的文章: vue 判断两个时间插件结束时间必选大于开始时间的代码 vue实现书本翻页动画效果实例详解 Vue实现简易翻页效果源码分享 vue实现弹窗翻页多选效果 vue自定义翻页组件的方法 vue实现数字翻页动画
总结
以上是 为你收集整理的 使用vue写一个翻页的时间插件实例代码 全部内容，希望文章能够帮你解决 使用vue写一个翻页的时间插件实例代码 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。
查看更多关于使用vue写一个翻页的时间插件实例代码的详细内容...
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://www.haodehen.cn/did203999