基于uniapp+vue3?實現(xiàn)72小時倒計時功能
更新時間:2025年05月06日 11:31:23 作者:洪洪呀
數(shù)組項有一個下單時間?,比如今天下單在72小時內可以繼續(xù)支付,超過則默認取消訂單,下面通過實例代碼介紹uniapp+vue3?實現(xiàn)72小時倒計時功能,感興趣的朋友一起看看吧
功能介紹 ,數(shù)組項有一個下單時間 ,比如今天下單在72小時內可以繼續(xù)支付,超過則默認取消訂單
頁面按鈕處 加上倒計時
<!-- 倒計時 --> <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); });
到此這篇關于基于uniapp+vue3 實現(xiàn)72小時倒計時功能的文章就介紹到這了,更多相關vue倒計時內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
vue3?+?elementPlus?reset重置表單問題
這篇文章主要介紹了vue3?+?elementPlus?reset重置表單問題,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-05-05Vue3使用Echarts導致tooltip失效問題及解決方法
Vue3 使用 proxy 對象代理,而 echarts 則使用了大量的全等(===), 對比失敗從而導致了bug,這篇文章主要介紹了Vue3使用Echarts導致tooltip失效問題及解決方法,需要的朋友可以參考下2023-08-08如何使用el-table+el-tree+el-select動態(tài)選擇對應值
小編在做需求時,遇到了在el-table表格中加入多條數(shù)據(jù),并且每條數(shù)據(jù)要通過el-select來選取相應的值,做到動態(tài)選擇,下面這篇文章主要給大家介紹了關于如何使用el-table+el-tree+el-select動態(tài)選擇對應值的相關資料,需要的朋友可以參考下2023-01-01