uni-app vue3 實現72小時倒計時功能

功能介紹 ,數組項有一個下單時間 ,比如今天下單在72小時內可以繼續支付,超過則默認取消訂單

在這里插入圖片描述

  1. 頁面按鈕處 加上倒計時
<!-- 倒計時 -->
<text v-if="item.timeLeft > 0">{{ formatTime(item.remaining) }}</text>
  1. 邏輯處理
// 第一步 處理接口返回的數據 原本是沒有倒計時 remaining這個值的 我們根據狀態給數組項加上
const listData = ref([])
console.log("列表數據", 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; // 倒計時狀態}
})
updateAllTimers();// 第二步 統一定時器
let timer;// 第三步 更新所有倒計時 這里的listData是頁面渲染的數組
const updateAllTimers = () => {const now = Date.now();listData.value.forEach(item => {const diff = item.endTime - now;item.remaining = diff;item.timeLeft = diff > 0;});
};// 第四步 時間格式化函數
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);
});

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/web/78726.shtml
繁體地址,請注明出處:http://hk.pswp.cn/web/78726.shtml
英文地址,請注明出處:http://en.pswp.cn/web/78726.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

一周學會Pandas2 Python數據處理與分析-Pandas2數據類型轉換操作

鋒哥原創的Pandas2 Python數據處理與分析 視頻教程&#xff1a; 2025版 Pandas2 Python數據處理與分析 視頻教程(無廢話版) 玩命更新中~_嗶哩嗶哩_bilibili Pandas 提供了靈活的方法來處理數據類型轉換&#xff0c;以下是常見操作及代碼示例&#xff1a; 1. 查看數據類型 …

LLM損失函數面試會問到的

介紹一下KL散度 KL&#xff08;Kullback-Leibler散度衡量了兩個概率分布之間的差異。其公式為&#xff1a; D K L ( P / / Q ) ? ∑ x ∈ X P ( x ) log ? 1 P ( x ) ∑ x ∈ X P ( x ) log ? 1 Q ( x ) D_{KL}(P//Q)-\sum_{x\in X}P(x)\log\frac{1}{P(x)}\sum_{x\in X}…

基于CBOW模型的詞向量訓練實戰:從原理到PyTorch實現

基于CBOW模型的詞向量訓練實戰&#xff1a;從原理到PyTorch實現 在自然語言處理&#xff08;NLP&#xff09;領域&#xff0c;詞向量是將單詞映射為計算機可處理的數值向量的重要方式。通過詞向量&#xff0c;單詞之間的語義關系能夠以數學形式表達&#xff0c;為后續的文本分…

Linux——進程終止/等待/替換

前言 本章主要對進程終止&#xff0c;進程等待&#xff0c;進程替換的詳細認識&#xff0c;根據實驗去理解其中的原理&#xff0c;干貨滿滿&#xff01; 1.進程終止 概念&#xff1a;進程終止就是釋放進程申請的內核數據結構和對應的代碼和數據 進程退出的三種狀態 代碼運行…

iOS開發架構——MVC、MVP和MVVM對比

文章目錄 前言MVC&#xff08;Model - View - Controller&#xff09;MVP&#xff08;Model - View - Presenter&#xff09;MVVM&#xff08;Model - View - ViewModel&#xff09; 前言 在 iOS 開發中&#xff0c;MVC、MVVM、和 MVP 是常見的三種架構模式&#xff0c;它們主…

0506--01-DA

36. 單選題 在娛樂方式多元化的今天&#xff0c;“ ”是不少人&#xff08;特別是中青年群體&#xff09;對待戲曲的態度。這里面固然存在 的偏見、難以靜下心來欣賞戲曲之美等因素&#xff0c;卻也有另一個無法回避的原因&#xff1a;一些戲曲雖然與觀眾…

關于Java多態簡單講解

面向對象程序設計有三大特征&#xff0c;分別是封裝&#xff0c;繼承和多態。 這三大特性相輔相成&#xff0c;可以使程序員更容易用編程語言描述現實對象。 其中多態 多態是方法的多態&#xff0c;是通過子類通過對父類的重寫&#xff0c;實現不同子類對同一方法有不同的實現…

【Trea】Trea國際版|海外版下載

Trea目前有兩個版本&#xff0c;海外版和國內版。? Trae 版本差異 ?大模型選擇?&#xff1a; ?國內版?&#xff1a;提供了字節自己的Doubao-1.5-pro以及DeepSeek的V3版本和R1版本。海外版&#xff1a;提供了ChartGPT以及Claude-3.5-Sonnet和3.7-Sonnt. ?功能和界面?&a…

Missashe考研日記-day33

Missashe考研日記-day33 1 專業課408 學習時間&#xff1a;2h30min學習內容&#xff1a; 今天開始學習OS最后一章I/O管理的內容&#xff0c;聽了第一小節的內容&#xff0c;然后把課后習題也做了。知識點回顧&#xff1a; 1.I/O設備分類&#xff1a;按信息交換單位、按設備傳…

鏈表的面試題3找出中間節點

來來來&#xff0c;接著繼續我們的第三道題 。 解法 暴力求解 快慢指針 https://leetcode.cn/problems/middle-of-the-linked-list/submissions/ 這道題的話&#xff0c;思路是非常明確的&#xff0c;就是讓你找出我們這個所謂的中間節點并且輸出。 那這道題我們就需要注意…

linux磁盤介紹與LVM管理

一、磁盤基本概述 GPT是全局唯一標識分區表的縮寫,是全局唯一標示磁盤分區表格式。而MBR則是另一種磁盤分區形式,它是主引導記錄的縮寫。相比之下,MBR比GPT出現得要更早一些。 MBR 與 GPT MBR 支持的磁盤最大容量為 2 TB,GPT 最大支持的磁盤容量為 18 EB,當前數據盤支持…

突破測試環境文件上傳帶寬瓶頸!React Native 阿里云 OSS 直傳文件格式問題攻克二

上一篇我們對服務端和阿里云oss的配置及前端調用做了簡單的介紹&#xff0c;但是一直報錯。最終判斷是文件格式問題&#xff0c;通常我們在reactnative中用formData上傳&#xff0c; formData.append(file, {uri: file, name: nameType(type), type: multipart/form-data});這…

Spring Boot 中 @Bean 注解詳解:從入門到實踐

在 Spring Boot 開發中&#xff0c;Bean注解是一個非常重要且常用的注解&#xff0c;它能夠幫助開發者輕松地將 Java 對象納入 Spring 容器的管理之下&#xff0c;實現對象的依賴注入和生命周期管理。對于新手來說&#xff0c;理解并掌握Bean注解&#xff0c;是深入學習 Spring…

TCP 協議設計入門:自定義消息格式與粘包解決方案

目錄 一、為什么需要自定義 TCP 協議&#xff1f; TCP粘包問題的本質 1.1 粘包與拆包的定義 1.2 粘包的根本原因 1.3 粘包的典型場景 二、自定義消息格式設計 2.1 協議結構設計 方案1&#xff1a;固定長度協議 方案2&#xff1a;分隔符標記法 方案3&#xff1a;長度前…

了解一下OceanBase中的表分區

OceanBase 是一個高性能的分布式關系型數據庫&#xff0c;它支持 SQL 標準的大部分功能&#xff0c;包括分區表。分區表可以幫助管理大量數據&#xff0c;提高查詢效率&#xff0c;通過將數據分散到不同的物理段中&#xff0c;可以減少查詢時的數據掃描量。 在 OceanBase 中操…

多線程網絡編程:粘包問題、多線程/多進程服務器實戰與常見問題解析

多線程網絡編程&#xff1a;粘包問題、多線程/多進程服務器實戰與常見問題解析 一、TCP粘包問題&#xff1a;成因、影響與解決方案 1. 粘包問題本質 TCP是面向流的協議&#xff0c;數據傳輸時沒有明確的消息邊界&#xff0c;導致多個消息可能被合并&#xff08;粘包&#xf…

大模型主干

1.什么是語言模型骨架LLM-Backbone,在多模態模型中的作用&#xff1f; 語言模型骨架&#xff08;LLM Backbone&#xff09;是多模態模型中的核心組件之一。它利用預訓練的語言模型&#xff08;如Flan-T5、ChatGLM、UL2等&#xff09;來處理各種模態的特征&#xff0c;進行語義…

[創業之路-350]:光刻機、激光器、自動駕駛、具身智能:跨學科技術體系全景解析(光-機-電-材-熱-信-控-軟-網-算-智)

光刻機、激光器、自動駕駛、具身智能四大領域的技術突破均依賴光、機、電、材、熱、信、控、軟、網、算、智十一大學科體系的深度耦合。以下從技術原理、跨學科融合、關鍵挑戰三個維度展開系統性分析&#xff1a; 一、光刻機&#xff1a;精密制造的極限挑戰 1. 核心技術與學科…

SVTAV1 編碼函數 svt_aom_is_pic_skipped

一 函數解釋 1.1 svt_aom_is_pic_skipped函數的作用是判斷當前圖片是否可以跳過編碼處理。 具體分析如下 函數邏輯 參數說明&#xff1a;函數接收一個指向圖片父控制集的指針PictureParentControlSet *pcs, 通過這個指針可以獲取與圖片相關的各種信息&#xff0c;用于判斷是否跳…

【Redis新手入門指南】從小白入門到日常使用(全)

文章目錄 前言redis是什么&#xff1f;定義原理與特點與MySQL對比 Redis安裝方式一、Homebrew 快速安裝 Redis&#xff08;推薦&#xff09;方式二、源碼編譯安裝redisHomebrew vs 源碼安裝對比 redis配置說明修改redis配置的方法常見redis配置項說明 redis常用命令redis服務啟…