微信小程序实现活动倒计时
2022-08-03 本文已影响0人
苏苏哇哈哈
1.实现效果
指定时间倒计时.gif
2.实现步骤
1.获取指定截止时间与当前时间的毫秒，即为剩余毫秒值，若剩余毫秒值小于0则返回0。
2.格式化当前毫秒，自动补0，转换成一个数组，格式为['天'，'时', '分', '秒']。
eg:
[364,11,30,07]
3.可进一步将['天'，'时', '分', '秒']拆分成[[,,,.]，'[,,]', '[,,]', '[,,]']。
eg:
[[3,6,4],[1,1],[3,0],[0,7]]
3.实现代码
<view class="flex-row time-box j_c">
<view class="time-item">{{left_time_list[0]}}</view>天
<view class="time-item">{{left_time_list[1]}}</view>时
<view class="time-item">{{left_time_list[2]}}</view>分
<view class="time-item">{{left_time_list[3]}}</view>秒
</view>
<view class="flex-row time-box j_c ">
<view class="flex-row">
<block wx:for="{{left_time_list_date[0]}}" wx:key="list">
<view class="time-item1">{{item}}</view>
</block>
<text>天</text>
</view>
<view class="flex-row">
<block wx:for="{{left_time_list_date[1]}}" wx:key="list">
<view class="time-item1">{{item}}</view>
</block>
<text>时</text>
</view>
<view class="flex-row">
<block wx:for="{{left_time_list_date[2]}}" wx:key="list">
<view class="time-item1">{{item}}</view>
</block>
<text>分</text>
</view>
<view class="flex-row">
<block wx:for="{{left_time_list_date[3]}}" wx:key="list">
<view class="time-item1">{{item}}</view>
</block>
<text>秒</text>
</view>
</view>
/* pages/actualPage/countdown/index.wxss */
.time-box {
font-size: 26rpx;
color: #EAA81B;
margin-bottom: 40rpx;
border-radius: 20rpx;
padding: 20px;
background: #fff;
margin: 20rpx;
}
.time-item {
width: 60rpx;
height: 40rpx;
background: linear-gradient(90deg, #FFEBB1 0%, #FFDB8F 100%);
border-radius: 4rpx;
font-size: 24rpx;
text-align: center;
line-height: 40rpx;
margin: 0 20rpx;
}
.time-item1 {
width: 30rpx;
height: 40rpx;
background: linear-gradient(90deg, #FFEBB1 0%, #FFDB8F 100%);
border-radius: 4rpx;
font-size: 24rpx;
text-align: center;
line-height: 40rpx;
margin: 0 10rpx;
}
Page({
data: {
left_time: '', //活动剩余时间的秒数
timer: '', //倒计时定时器
left_time_list: [], //剩余秒数转换 天，小时 分 秒
left_time_list_date: []
},
onShow: function () {
this.getLeftTime('2023/08/03 11:20:00')
},
/**
* 定时器，计算剩下时间
* @param {*} end_time
*/
getLeftTime(end_time) {
let left_time = this.getTimestap(end_time);
this.initDate(left_time)
this.data.timer = setInterval(() => {
if (left_time-- === 0) {
this.setData({
left_time: 0,
left_time_list: this.formatSeconds(0)
})
clearInterval(this.data.timer)
} else {
this.initDate(left_time)
}
}, 1000);
},
/**
* 初始化数据
*/
initDate(e) {
let left_time_list = this.formatSeconds(e),
left_time_list_date = this.formatDate(JSON.stringify(left_time_list));
this.setData({
left_time: e,
left_time_list,
left_time_list_date
})
},
/**
* 获取指定时间-当前时间的秒数
* @param {*} end_time
*/
getTimestap(end_time) {
// 当前时间
var currentTime = parseInt(new Date().getTime() / 1000);
// 未来时间
var futureTime = parseInt(new Date(end_time.replace(/-/g, '/')).getTime() / 1000); //ios无法解析
return futureTime <= currentTime ? 0 : futureTime - currentTime;
},
/**
* 毫秒-天-时-分-秒
* @param {*} value
*/
formatSeconds(value) {
let time = [],
day = parseInt(value / 86400),
hour = parseInt((value % 86400) / 3600),
min = parseInt(((value % 86400) % 3600) / 60),
sec = parseInt(((value % 86400) % 3600) % 60);
time[0] = day > 0 ? this.addZero(day) : this.addZero(0);
time[1] = hour > 0 ? this.addZero(hour) : this.addZero(0);
time[2] = min > 0 ? this.addZero(min) : this.addZero(0);
time[3] = sec > 0 ? this.addZero(sec) : this.addZero(0);
return time;
},
/**
* 拆分数组-天-时-分-秒
* @param {*} e
*/
formatDate(e) {
let list = JSON.parse(e);
for (let i = 0; i < list.length; i++) {
list[i] = list[i].toString().split('');
}
return list;
},
/**
* 补0
* @param {*} num
*/
addZero(num) {
return num < 10 ? "0" + num : num;
},
onUnload() {
if (this.data.timer) {
console.log('销毁计时器')
clearInterval(this.data.timer)
}
}
})
