微信小程序倒计时:单个,多个循环倒计时
<view>
<!-- 单个倒计时 -->
<view>单个倒计时:</view>
<view class="common common1">
<view>{{day}}天{{hour}}时{{minute}}分{{second}}秒</view>
</view>
<view class="line"></view>
<!-- 循环倒计时 -->
<!-- 方法一 -->
<view>循环倒计时:方法一</view>
<view wx:for="{{listArr}}" wx:key="index" class="common">
<view>{{item.count_down.day}}天{{item.count_down.hou}}时{{item.count_down.min}}分{{item.count_down.sec}}秒</view>
</view>
<view class="line"></view>
<!-- 方法二 -->
<view>循环倒计时:方法二</view>
<view wx:for="{{goodArr}}" wx:key="index" class="common common3">
<view>{{item.countDown}}</view>
</view>
</view>
.common view{
background: pink;
margin: 20rpx 0;
height: 100rpx;
display: flex;
align-items: center;
justify-content: center;
}
.common1 view{
background: darkcyan;
}
.common3 view{
background: cornflowerblue;
}
.line{
width: 100%;
height: 10rpx;
background: green;
margin-bottom: 20rpx;
}
Page({
data: {
// 单个倒计时
time_diff:60000,
// 循环倒计时:方法一
listArr: [
{id:1,end_time:'2022/12/18 17:20:30'},
{id:2,end_time:'2022/11/17 15:36:10'},
{id:3,end_time:'2022/10/20 18:02:46'},
],
// 循环倒计时:方法二
goodArr: [
{id:1,time:'6000000'},
{id:2,time:'620000'},
{id:3,time:'30000'},
],
},
// 单个倒计时
countDown_one: function () {
var that = this;
var now_time = that.data.time_diff;
this.data.intervarID = setInterval(function () {
now_time--
let d = Math.floor((now_time - (now_time % 86400)) / 86400)
let h = Math.floor((now_time % 86400) / 3600)
let m = Math.floor((now_time % 3600) / 60)
let s = now_time % 60
that.setData({
day: d,
hour: h,
minute: m,
second: s
})
//倒计时结束,清除定时器
if (d <= 0 && h <= 0 && m <= 0 && s <= 0) {
clearInterval(that.data.intervarID);
}
}, 1000
)
},
// 循环倒计时:方法一
countDown: function() {
let newTime = new Date().getTime();
let endTimeList = this.data.listArr;
endTimeList.forEach(i => {
let endTime = new Date(i.end_time).getTime();
let obj = null;
let time = (endTime - newTime) / 1000;
let day = parseInt(time / (60 * 60 * 24));
let hou = parseInt(time % (60 * 60 * 24) / 3600);
let min = parseInt(time % (60 * 60 * 24) % 3600 / 60);
let sec = parseInt(time % (60 * 60 * 24) % 3600 % 60);
obj = {
day: this.timeFormat(day),
hou: this.timeFormat(hou),
min: this.timeFormat(min),
sec: this.timeFormat(sec)
}
i.count_down = obj
if(i.count_down.day=='00'&&i.count_down.hou=='00'&&i.count_down.min=='00'&&i.count_down.sec=='00'){
console.log('计时结束')
// 根据需求操作数据:比如刷新页面
}
})
this.setData({ listArr: endTimeList })
setTimeout(this.countDown, 1000);
},
timeFormat(param) {
return param < 10 ? '0' + param : param;
},
// 循环倒计时:方法二
setCountDown22: function () {
var that = this
let time = 1000;
that.data.goodArr.map((v, i) => {
if (v.time == 0) {
console.log('计时结束')
// 根据需求操作
}
let formatTime = this.getFormat22(v.time)
v.time -= time;
v.countDown = `${formatTime.hh}:${formatTime.mm}:${formatTime.ss}`;
return v
})
this.setData({
goodArr: that.data.goodArr
})
setTimeout(that.setCountDown22, 1000)
},
getFormat22: function (msec) {
let ss = parseInt(msec / 1000);
let ms = parseInt(msec % 1000);
let mm = 0;
let hh = 0;
if (ss > 60) {
mm = parseInt(ss / 60);
ss = parseInt(ss % 60);
if (mm > 60) {
hh = parseInt(mm / 60);
mm = parseInt(mm % 60);
}
}
ss = ss > 9 ? ss : `0${ss}`;
mm = mm > 9 ? mm : `0${mm}`;
hh = hh > 9 ? hh : `0${hh}`;
return {
ss,
mm,
hh
};
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
this.countDown_one()
this.countDown()
this.setCountDown22()
},
})