時間過得真是飛速，很快又要到一年一度的五一勞動節(jié)啦，今年五天假，做好準(zhǔn)備了嗎？今天我們用CSS3 + Vue3 + 一個前端工具庫 js-tool-big-box來實現(xiàn)一個炫酷的五一倒計時動效吧。
目錄
1??先制作一個CSS3樣式
2 Vue3功能提前準(zhǔn)備?
3 使用js-tool-big-box工具完成倒計時
3.1 安裝工具
3.2 頁面引入
3.3 補充倒計時代碼?
4 最后
?
1??先制作一個CSS3樣式
頁面元素比較簡單，外面放一個DIV元素，里面兩個P元素即可。第一個P元素我們書寫“距離五一勞動節(jié)還有”這幾個字。第二行的P元素用來存放倒計時顯示的內(nèi)容。
最外部的DIV，我們采用flex布局，這樣中間的倒計時樣式可以水平并且垂直居中。并且給背景設(shè)置一個線性的漸變，采用的是?radial-gradient 屬性。中間字體的樣式重點看一下?font-family??background-image線性漸變以及webkit-text-fill-color 透明的的配合設(shè)置。代碼如下：
// Vue3 DOM片段
<template>
<div class="home">
<p>距離五一勞動節(jié)還有</p>
<p>{{ timeShow }}</p>
</div>
</template>
// css3設(shè)置
<style lang="scss" scoped>
.home {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
background: radial-gradient(#272727, #b052b0);
p {
line-height: 100px;
letter-spacing: 2px;
position: relative;
font-size: 60px;
font-family: Verdana, Geneva, STCaiyun, sans-serif;
background-image: -webkit-linear-gradient(#d5cabd 0%, #717597 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
margin: 0;
// -webkit-filter: drop-shadow(2px 2px 15px #b052b0);
}
}
</style>?
2 Vue3功能提前準(zhǔn)備?
與Vue2不同的是，Vue3中，我們用?ref?來存放一些data數(shù)據(jù)依賴，這就需要從vue中引入ref這個函數(shù)對象，同時設(shè)定一個?timeShow 變量，用來存放我們即將要顯示的倒計時內(nèi)容，倒計時肯定要涉及到setInterval定時函數(shù)，初步代碼如下：
<script setup>
import { ref } from "vue";
let timeShow = ref(null);
let timerId = null;
const doInterval = () => {
// 這里初始化顯示倒計時
timeShow.value = '';
timerId = setInterval(() => {
// 這里每隔一秒顯示新的倒計時時間
timeShow.value = '';
}, 990)
}
doInterval();
</script>3 使用js-tool-big-box工具完成倒計時
3.1 安裝工具
首先第一步，要使用js-tool-big-box這個工具，就需要下載安裝，執(zhí)行以下命令
npm i?js-tool-big-box
3.2 頁面引入
安裝成功后，package.json中會有新的安裝顯示
這個時候，我們就要在頁面中引入工具，工具對外暴露了 timeBox 的對象，我們可以使用這個對象里面的方法進(jìn)行倒計時計算，代碼如下：
import { timeBox } from "js-tool-big-box";3.3 補充倒計時代碼?
引入成功后，我們就可以使用 timeBox 里面的?getDistanceNow 方法來計算倒計時了，這個方法接收2個入?yún)?，第一個是目標(biāo)時間，我們設(shè)定為“2024-05-01 00:00:00”，第二個參數(shù)是非必填的，但他會有一些默認(rèn)單位返回，也可以按照自己的需求進(jìn)行個性化修改，補充代碼如下：
<script setup>
import { ref } from "vue";
import { timeBox } from "js-tool-big-box";
let timeShow = ref(null);
let timerId = null;
const doInterval = () => {
let timeData = timeBox.getDistanceNow('2024-05-01 00:00:00', {afterUnit:''});
timeShow.value = timeData.fullDateTime;
timerId = setInterval(() => {
timeData = timeBox.getDistanceNow('2024-05-01 00:00:00', {afterUnit:''});
timeShow.value = timeData.fullDateTime;
}, 990)
}
doInterval();
</script>?展示效果如下圖：
4 最后
這就是Vue3 + CSS3 + js-tool-big-box 的結(jié)合使用，js-tool-big-box這個工具很強大，我正在總結(jié)使用方法：js-tool-big-box使用方法，他不僅可以對日期時間做轉(zhuǎn)換，還可以獲取某一年的屬相，某一年的法定節(jié)假日，對cookie localstorage做存取，等等，很多大家項目中需要單獨書寫的公共方法，他都有，不需要大家再逐一去安裝學(xué)習(xí)了，很便捷，很強大。文章來源：http://www.zghlxwxcb.cn/news/detail-857403.html
最后，祝大家過一個美好的五一假期。文章來源地址http://www.zghlxwxcb.cn/news/detail-857403.html
到了這里，關(guān)于使用CSS3 + Vue3 + js-tool-big-box工具，實現(xiàn)炫酷五一倒計時動效的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
