使用vue寫一個翻頁的時間插件實(shí)例代碼
更新時間：2023年02月20日 11:55:30 作者：青衣瀏陽
最近在做自己項(xiàng)目中遇到一個非常簡單的功能,跟大家分享下,這篇文章主要給大家介紹了關(guān)于使用vue寫一個翻頁的時間插件的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
讀秒效果有一個從上向下的翻頁效果
效果圖
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);
}
}
}
// 執(zhí)行翻頁操作
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
}
}
// 獲取時間顯示參數(shù)
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>
總結(jié)
到此這篇關(guān)于使用vue寫一個翻頁的時間插件的文章就介紹到這了,更多相關(guān)vue翻頁時間插件內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
本文主要介紹了Vue3中v-for的使用方法,包括遍歷數(shù)組、遍歷對象、索引訪問、嵌套遍歷以及結(jié)合計(jì)算屬性和方法的使用,v-for可以幫助用戶動態(tài)地生成和管理列表數(shù)據(jù),并根據(jù)需要進(jìn)行復(fù)雜的DOM操作,提供了多種示例,幫助讀者更好地理解和使用v-for2024-10-10
這篇文章教大家如何分分鐘玩轉(zhuǎn)Vue.js組件,完善了vue.js組件的學(xué)習(xí)資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-03-03
vue中的路由傳值與重調(diào)本路由改變參數(shù)
這篇文章主要介紹了vue中的路由傳值與重調(diào)本路由改變參數(shù)方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
Vue?2源碼閱讀?Provide?Inject?依賴注入詳解
這篇文章主要為大家介紹了Vue?2源碼閱讀?Provide?Inject?依賴注入詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-08-08
這篇文章主要介紹了vue中$refs的用法及作用詳解,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2018-04-04
這篇博客針對axios庫的核心代碼做一個簡要總結(jié)，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-09-09
今天小編就為大家分享一篇解決vuecli3.0熱更新失效的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
Vue中為什么要引入render函數(shù)的實(shí)現(xiàn)
本文主要介紹了Vue中為什么要引入render函數(shù)的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-01-01
最近在做一個基于vue的后臺管理項(xiàng)目。接下來通過本文給大家分析一款基于vue做一個禪道主頁拖拽效果,需要的朋友可以參考下2019-05-05
laravel5.3 vue 實(shí)現(xiàn)收藏夾功能實(shí)例詳解
這篇文章主要介紹了laravel5.3 vue 實(shí)現(xiàn)收藏夾功能，本文通過實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下2018-01-01