使用vue寫一個翻頁的時間插件實例代碼
更新時間：2023年02月20日 11:55:30 作者：青衣瀏陽
最近在做自己項目中遇到一個非常簡單的功能,跟大家分享下,這篇文章主要給大家介紹了關(guān)于使用vue寫一個翻頁的時間插件的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下
讀秒效果有一個從上向下的翻頁效果
效果圖
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)文章
這篇文章主要為大家介紹了vue保存自動格式化換行，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2021-12-12
Vue框架可以很方便的引入各種插件,但是也因此會經(jīng)常遇到種編譯報錯,這篇文章主要給大家介紹了關(guān)于vue前端編譯報錯解決的相關(guān)資料,文中通過圖文介紹的非常詳細,需要的朋友可以參考下2024-03-03
Element el-table的formatter和scope?template不能同時存在問題解決辦法
本文主要介紹了ElementUI?el-table?的?formatter?和?scope?template?不能同時存在問題解決辦法，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習或者工作具有一定的參考學(xué)習價值，需要的朋友們下面隨著小編來一起學(xué)習學(xué)習吧2022-08-08
詳解element-ui表格的合并行和列(非常細節(jié))
最近在需求中遇到了elementUI合并行,索性給大家整理下,這篇文章主要給大家介紹了關(guān)于element-ui表格的合并行和列的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2023-06-06
這篇文章主要為大家詳細介紹了Vue實現(xiàn)導(dǎo)航欄點擊當前標簽變色功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-05-05
記一次用ts+vuecli4重構(gòu)項目的實現(xiàn)
這篇文章主要介紹了記一次用ts+vuecli4重構(gòu)項目的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習或者工作具有一定的參考學(xué)習價值，需要的朋友們下面隨著小編來一起學(xué)習學(xué)習吧2020-05-05
Vue中通過屬性綁定為元素綁定style行內(nèi)樣式的實例代碼
這篇文章主要介紹了Vue中通過屬性綁定為元素綁定style行內(nèi)樣式,本文通過實例代碼給大家介紹的非常詳細，對大家的學(xué)習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-04-04
這篇文章主要為大家詳細介紹了vue實現(xiàn)拖拽或點擊上傳圖片，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
這篇文章主要給大家介紹了關(guān)于vue中自定義指令directive的相關(guān)資料,自定義指令解決的問題或者說使用場景是對普通 DOM 元素進行底層操作,所以我們不能盲目的胡亂的使用自定義指令,需要的朋友可以參考下2021-09-09
Vue3是一款流行的前端框架,它支持多種傳值方式,包括兄弟組件之間的傳值,本文主要介紹了vue3+ts 兄弟組件之間傳值的實現(xiàn),具有一定的參考價值,感興趣的可以了解一下2023-11-11