小程序實現倒計時組件的使用示例
更新時間：2023年09月15日 15:15:32 作者：推開世界的門
倒計時是指從一個固定的時間開始,向前推算一段時間,來計算目標時間或剩余時間的過程,本文主要介紹了小程序實現倒計時組件的使用示例,具有一定的參考價值,感興趣的可以了解一下
需求背景
要做一個倒計時，可能是天級別，也可能是日級別，時級別，而且每個有效訂單都要用，就做成組件了
效果圖
需求分析
- 需要一個未來的時間戳，或者在服務度直接下發(fā)一個未來到現在時間差，我們只需要做倒計時
- 進入頁面，看是否已經結束， 如果沒結束就調用倒計時函數
- 每隔1000，做時間戳(毫秒) -1000。邊做tick ,邊做時間格式化。
- 每次調用前，先清除上一個定時器
- 組件銷毀的時候，也要清除一下定時器
代碼實現
設置初始值，也是1秒,這里單位時毫秒
const interval = 1000;
進入頁面，初始化完成。開始判斷是否結束
lifetimes: {
ready() {
this.startCountdown();
},
detached() {
clearTimeout(this.timer);
},
},startCountdown() {
const lastTime = this.initTime(this.properties.expireTime); // 這一步，如果服務端返回了未來到現在的差值，則不需要自己計算時間差了
// 如果最終時間 < 1000ms 說明 已經過期了，就不用展示倒計時了.
if (lastTime > interval) {
// 格式化要展示的數據
this.defaultFormat(lastTime);
this.setData({
isCountOver: true, // 標識可以顯示倒計時
lastTime, // set lastTime
});
// 調用倒計時函數，主要的邏輯就是每隔1000ms ,讓lastTime - 1000
this.tick();
}
},初始化時間： 如果服務度返回了時間差，這一步不用處理
//初始化時間
initTime(expireTime) {
let lastTime = Number(new Date(expireTime * 1000)) - new Date().getTime();
console.log('lastTime', lastTime);
return Math.max(lastTime, 0);
},時間的格式化處理，這里都是固定代碼，沒什么含量
//默認處理時間格式
defaultFormat(time) {
const days = 60 * 60 * 1000 * 24;
const hours = 60 * 60 * 1000;
const minutes = 60 * 1000;
const d = Math.floor(time / days);
const h = Math.floor((time % days) / hours);
const m = Math.floor((time % hours) / minutes);
const s = Math.floor((time % minutes) / 1000);
this.setData({
d: this.fixedZero(d),
h: this.fixedZero(h),
m: this.fixedZero(m),
s: this.fixedZero(s),
});
},
// 格式化時間加0
fixedZero(val) {
return val < 10 ? `0${val}` : val;
},tick 倒計時函數
tick() {
let { lastTime } = this.data;
this.timer = setTimeout(() => {
// 每次定時器之前，先把上一個定時器清除
clearTimeout(this.timer);
// 如果倒計時結束，這是結束的狀態(tài)
if (lastTime < interval) {
this.setData({
lastTime: 0,
isCountOver: false,
});
} else {
// 如果倒計時正常，則每次 -1000 ,并且格式化時間。再次調用tick，直到倒計時結束
lastTime -= 1000;
this.setData(
{
lastTime,
},
() => {
this.defaultFormat(lastTime);
this.tick();
},
);
}
}, interval);
},完整代碼
父組件(我這里傳了一個比較大的時間戳，2024,10.1結束的時間戳)
<order-time expireTime="{{ 1727712000 }}">
<view slot="desc">還剩</view>
</order-time>子組件 (wxml)
<view wx:if="{{ isCountOver }}" class="timer-wrap">
<slot name="desc" />
<view class="reset-time">
<text wx:if="{{ d != '00' }}"> {{ d }}天</text>
{{ h }}:{{ m }}:{{ s }}</view
>
</view>
<view wx:else class="reset-time"> {{ emptyType === '1' ? '已超時': '' }} </view>子組件 (js)
let interval = 1000;
Component({
options: {
multipleSlots: true,
},
properties: {
expireTime: {
type: String,
},
emptyType: {
type: String,
value: '1',
},
},
lifetimes: {
ready() {
this.startCountdown();
},
detached() {
clearTimeout(this.timer);
},
},
/**
* 組件的初始數據
*/
data: {
d: 0, //天
h: 0, //時
m: 0, //分
s: 0, //秒
lastTime: '', //倒計時的時間戳
isCountOver: false, // 倒計時是否完成
},
/**
* 組件的方法列表
*/
methods: {
startCountdown() {
const lastTime = this.initTime(this.properties.expireTime);
if (lastTime > interval) {
this.defaultFormat(lastTime);
this.setData({
isCountOver: true,
lastTime,
});
this.tick();
}
},
//默認處理時間格式
defaultFormat(time) {
const days = 60 * 60 * 1000 * 24;
const hours = 60 * 60 * 1000;
const minutes = 60 * 1000;
const d = Math.floor(time / days);
const h = Math.floor((time % days) / hours);
const m = Math.floor((time % hours) / minutes);
const s = Math.floor((time % minutes) / 1000);
this.setData({
d: this.fixedZero(d),
h: this.fixedZero(h),
m: this.fixedZero(m),
s: this.fixedZero(s),
});
},
//定時事件
tick() {
let { lastTime } = this.data;
this.timer = setTimeout(() => {
clearTimeout(this.timer);
if (lastTime < interval) {
this.setData({
lastTime: 0,
isCountOver: false,
});
} else {
lastTime -= 1000;
this.setData(
{
lastTime,
},
() => {
this.defaultFormat(lastTime);
this.tick();
},
);
}
}, interval);
},
//初始化時間
initTime(expireTime) {
let lastTime = Number(new Date(expireTime * 1000)) - new Date().getTime();
console.log('lastTime', lastTime);
return Math.max(lastTime, 0);
},
// 格式化時間加0
fixedZero(val) {
return val < 10 ? `0${val}` : val;
},
},
});遇到相關變量，自己更改即可
到此這篇關于小程序實現倒計時組件的使用示例的文章就介紹到這了,更多相關小程序 倒計時組件內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
在JavaScript中并沒有直接支持函數重載的機制,但是可以通過一些技巧來模擬函數重載的效果,比如使用參數判斷,使用默認參數,對象參數,這些方法都可以實現類似函數重載的效果,所以本文就給大家介紹一下JavaScript如何實現函數重載,需要的朋友可以參考下2023-08-08
這篇文章主要介紹了JS實現圖片點擊后出現模態(tài)框效果,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2017-05-05![this[] 指的是什么內容 討論](http://img.jbzj.com/images/xgimg/bcimg2.png)
this[] 指的是什么內容 討論...2007-03-03
這篇文章主要介紹了JS實現漢字與Unicode碼相互轉換的方法,結合實例形式較為詳細的分析了javascript針對漢字與Unicode編碼轉換的操作技巧與相關注意事項,需要的朋友可以參考下2017-04-04
這篇文章主要介紹了關于JSON解析的實現過程解析,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2019-10-10
javascript簡化代碼 A=alert w=document.writeln
建議不要這樣寫代碼,考慮以后的修改才是最重要的,代碼分層.多把一個功能寫成一個js代碼或一個類,然后提供接口,這種寫法代碼會更多,速度也更慢,但人人都推薦這樣寫,是因為這樣子維護方便.而程序不可能一次性寫得完美的,永遠都可以改進2008-02-02
因項目需要，開始學習并研究VC、DLL及ActiveX控件，網上資料找了很多，但沒一個可用的或者說沒一個例子可理解并運行的。沒辦法，自己研究吧。功夫不負有心人，終有小成了，呵呵，現在把自己學習總結了一下，獻給需要的人。2010-08-08
web開發(fā)過程中經常碰到需要調用百度地圖來視線定位導航的過程,許多技術博客上介紹的都是調用百度地圖的api,這篇文章主要給大家介紹了關于前端百度地圖添加點并跳轉到百度地圖進行導航的相關資料,需要的朋友可以參考下2024-07-07
這篇文章主要介紹了JS如何修改數組對象的Key和指定的值,本文通過示例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-10-10
這篇文章主要介紹了javascript實現簡單的鼠標拖動效果,實例分析了javascript鼠標拖動效果的相關要點與實現技巧,非常具有實用價值,需要的朋友可以參考下2015-04-04