溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇文章給大家分享的是有關微信小程序如何實現單個或多個倒計時功能，小編覺得挺實用的，因此分享給大家學習，希望大家閱讀完這篇文章后可以有所收獲，話不多說，跟著小編一起來看看吧。
思路：首先獲取到每個倒計時的結束時間，然后把結束時間跟當前時間轉換成時間戳，結束時間減去當前時間再除以1000（因為時間戳是毫秒級）就是該結束時間距離當前時間的秒數了，然后根據公式計算出時分秒，最后使用定時器每秒跑一次就實現成功啦~
兩種倒計時思路差不多，多個倒計時多了遍歷數組步驟，遍歷拿到數組中每個對象結束時間來計算時間
wxml:
// 單個倒計時-----wxml
<view class="countdown">
<view class="item">
倒計時：
<view class="txt-time">{{txtTime.hou}}</view>:
<view class="txt-time">{{txtTime.min}}</view>:
<view class="txt-time">{{txtTime.sec}}</view>
</view>
</view>css:
// 單個倒計時-----wxss
.countdown .item {
display: flex;
justify-content: center;
align-items: center;
height: 200rpx;
width: 90%;
margin: 0 5%;
border-bottom: 2rpx solid #eee;
}
.countdown .item .txt-time {
background-color: #6EBEC7;
color: #fff;
border-radius: 10rpx;
font-size: 28rpx;
margin: 0 4rpx;
font-weight: bold;
height: 42rpx;
width: 66rpx;
line-height: 42rpx;
text-align: center;
}js:
// 單個倒計時-----js
Page({
/**
* 頁面的初始數據
*/
data: {
endTime: "2020-08-22 18:30:00",//結束時間
},
//時間顯示小于10的格式化函數
timeFormat(param) {
return param < 10 ? '0' + param : param;
},
//倒計時
singleCountDown: function () {
var that = this;
var time = 0;
var obj = {};
var endTime = new Date(that.data.endTime.replace(/-/g, "/")).getTime();//結束時間時間戳
var currentTime = new Date().getTime();//當前時間時間戳
time = (endTime - currentTime) / 1000;
// 如果活動未結束
if (time > 0) {
var hou = parseInt(time / (60 * 60));
var min = parseInt(time % (60 * 60 * 24) % 3600 / 60);
var sec = parseInt(time % (60 * 60 * 24) % 3600 % 60);
obj = {
hou: that.timeFormat(hou),
min: that.timeFormat(min),
sec: that.timeFormat(sec)
}
} else { //活動已結束
obj = {
hou: "00",
min: "00",
sec: "00"
}
clearTimeout(that.data.timeIntervalSingle); //清除定時器
}
var timeIntervalSingle = setTimeout(that.singleCountDown, 1000);
that.setData({
timeIntervalSingle,
txtTime: obj,
})
},
/**
* 生命周期函數--監聽頁面加載
*/
onLoad: function (options) {
this.singleCountDown();//頁面加載時就啟動定時器
},
})多個倒計時
wxml:
// 多個倒計時顯示-----wxml
<view class="countdown">
<block wx:for="{{timeList}}" wx:key="index">
<view class="item">
{{item.title}}：
<view class="txt-time">{{item.time.hou}}</view>:
<view class="txt-time">{{item.time.min}}</view>:
<view class="txt-time">{{item.time.sec}}</view>
</view>
</block>
</view>wxss: 跟上面單個倒計時樣式一樣，這里就不貼出來啦！
js：
// 多個倒計時顯示-----wxml
Page({
/**
* 頁面的初始數據
*/
data: {
timeList: [{//時間數組
title: "a倒計時",
endTime: "2020-08-23 18:00:00",
}, {
title: "b倒計時",
endTime: "2020-08-25 20:00:00",
}, {
title: "c倒計時",
endTime: "2020-08-21 20:00:00",
}],
},
//時間顯示小于10的前面補0方法
timeFormat(param) {
return param < 10 ? '0' + param : param;
},
//多個倒計時函數
severalCountDown: function () {
var that = this;
var time = 0;
var obj = {};
var timeList = that.data.timeList;
//遍歷數組，計算每個item的倒計時秒數
timeList.forEach(function (item) {
var endTime = new Date(item.endTime.replace(/-/g, "/")).getTime();//結束時間時間戳
var currentTime = new Date().getTime();//當前時間時間戳
time = (endTime - currentTime) / 1000;
// 如果活動未結束
if (time > 0) {
var hou = parseInt(time / (60 * 60));
var min = parseInt(time % (60 * 60 * 24) % 3600 / 60);
var sec = parseInt(time % (60 * 60 * 24) % 3600 % 60);
obj = {
hou: that.timeFormat(hou),
min: that.timeFormat(min),
sec: that.timeFormat(sec)
}
} else { //活動已結束
obj = {
hou: "00",
min: "00",
sec: "00"
}
clearTimeout(that.data.timeIntervalSeveral); //清除定時器
}
item.time = obj;
})
var timeIntervalSeveral = setTimeout(that.severalCountDown, 1000);
that.setData({
timeIntervalSeveral,
timeList,
})
},
/**
* 生命周期函數--監聽頁面加載
*/
onLoad: function (options) {
this.severalCountDown();//多個定時器
},
})易錯點：結束時間轉換成時間戳時要特別特別注意把時間字符串的‘-'替換成‘/'，不然在ios中有報錯
溫馨提示：定時器推薦使用setTimeout()，而不推薦setinterval
好了，看到這里單個或者多個倒計時顯示功能就實現成功啦，具體樣式可以根據自己需求修改即可。
以上就是微信小程序如何實現單個或多個倒計時功能，小編相信有部分知識點可能是我們日常工作會見到或用到的。希望你能通過這篇文章學到更多知識。更多詳情敬請關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
