基于uniapp+vue3?實現(xiàn)72小時倒計時功能
更新時間：2025年05月06日 11:31:23 作者：洪洪呀
數(shù)組項有一個下單時間?,比如今天下單在72小時內(nèi)可以繼續(xù)支付,超過則默認(rèn)取消訂單,下面通過實例代碼介紹uniapp+vue3?實現(xiàn)72小時倒計時功能,感興趣的朋友一起看看吧
功能介紹 ，數(shù)組項有一個下單時間 ，比如今天下單在72小時內(nèi)可以繼續(xù)支付，超過則默認(rèn)取消訂單
頁面按鈕處 加上倒計時
<!-- 倒計時 -->
<text v-if="item.timeLeft > 0">{{ formatTime(item.remaining) }}</text>邏輯處理
// 第一步 處理接口返回的數(shù)據(jù) 原本是沒有倒計時 remaining這個值的 我們根據(jù)狀態(tài)給數(shù)組項加上
const listData = ref([])
console.log("列表數(shù)據(jù)", res);
res.forEach((item) => {
if (item.actions.pay) {
const createTime = new Date(item.create_time).getTime(); // 下單時間處理
item.endTime = createTime + 72 * 3600 * 1000; // 計算72小時截止時間
item.remaining = 0; // 剩余時間（毫秒）
item.timeLeft = true; // 倒計時狀態(tài)
}
})
updateAllTimers();
// 第二步 統(tǒng)一定時器
let timer;
// 第三步 更新所有倒計時 這里的listData是頁面渲染的數(shù)組
const updateAllTimers = () => {
const now = Date.now();
listData.value.forEach(item => {
const diff = item.endTime - now;
item.remaining = diff;
item.timeLeft = diff > 0;
});
};
// 第四步 時間格式化函數(shù)
const formatTime = (milliseconds) => {
if (milliseconds <= 0) return '00:00:00';
const totalSeconds = Math.floor(milliseconds / 1000);
const hours = Math.floor(totalSeconds / 3600).toString().padStart(2, '0');
const minutes = Math.floor((totalSeconds % 3600) / 60).toString().padStart(2, '0');
const seconds = (totalSeconds % 60).toString().padStart(2, '0');
return `${hours}:${minutes}:${seconds}`;
};
// 生命周期管理
onMounted(() => {
timer = setInterval(updateAllTimers, 1000);
});
// 卸載
onUnmounted(() => {
clearInterval(timer);
});到此這篇關(guān)于基于uniapp+vue3 實現(xiàn)72小時倒計時功能的文章就介紹到這了,更多相關(guān)vue倒計時內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
在Electron 中,存取本地文件,有很多種辦法,本文介紹最常用的一種辦法, 通過 Electron 框架提供的能力,和 Node.js 的 fs 文件管理模塊實現(xiàn)本地文件的存取,需要的小伙伴可以參考下2023-11-11
vue3?+?elementPlus?reset重置表單問題
這篇文章主要介紹了vue3?+?elementPlus?reset重置表單問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-05-05
Vue3使用Echarts導(dǎo)致tooltip失效問題及解決方法
Vue3 使用 proxy 對象代理,而 echarts 則使用了大量的全等（===）, 對比失敗從而導(dǎo)致了bug,這篇文章主要介紹了Vue3使用Echarts導(dǎo)致tooltip失效問題及解決方法,需要的朋友可以參考下2023-08-08
本篇文章主要介紹了在vue中通過axios異步使用echarts的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-01-01
插槽（slot）是 vue 為組件的封裝者提供的能力。允許開發(fā)者在封裝組件時，把不確定的、希望由用戶指定的部分定義為插槽?？梢园巡宀壅J(rèn)為是組件封裝期間，為用戶預(yù)留的內(nèi)容的占位符2022-09-09
在 Vue 中,嵌套路由和 Element Plus 的 Menu 組件是構(gòu)建復(fù)雜單頁面應(yīng)用（SPA）時的常用組合,通過嵌套路由,可以實現(xiàn)多級頁面結(jié)構(gòu),以下是結(jié)合 Vue 嵌套路由和 Element Plus Menu 的各種用法和場景的詳細(xì)介紹,需要的朋友可以參考下2025-01-01
這篇文章主要介紹了vue3.0?setup中使用vue-router問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
組件（Component）是Vue.js最強(qiáng)大的功能之一,組件可以擴(kuò)展?HTML?元素,封裝可重用的代碼,這篇文章主要給大家介紹了關(guān)于VUE3學(xué)習(xí)教程之全局組件和局部組件的相關(guān)資料,需要的朋友可以參考下2022-01-01
如何使用el-table+el-tree+el-select動態(tài)選擇對應(yīng)值
小編在做需求時,遇到了在el-table表格中加入多條數(shù)據(jù),并且每條數(shù)據(jù)要通過el-select來選取相應(yīng)的值,做到動態(tài)選擇,下面這篇文章主要給大家介紹了關(guān)于如何使用el-table+el-tree+el-select動態(tài)選擇對應(yīng)值的相關(guān)資料,需要的朋友可以參考下2023-01-01
關(guān)于在vue中實現(xiàn)過渡動畫的代碼示例
Vue是一款流行的前端框架，支持過渡動畫的實現(xiàn)是其中的一項重要特性，在Vue中，使用過渡動畫可以為用戶提供更加友好的用戶體驗，下面我將為大家介紹一下子如何在Vue中實現(xiàn)過渡動畫,需要的朋友可以參考下2023-06-06