本篇文章给大家带来的内容是关于微信小程序实例:如何实现批量倒计时,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。
//适用于商品列表倒计时/** * end_time int 结束时间 * param int 数组键 */
1.展示效果如下:

2.wxml代码:
<p class="promotion-label-tits">仅{{item.endtime}}</p> 3.js代码:
//封装的倒计时方法
//批量倒计时
function grouponcountdown(that, end_time, param) {
var endtime = new date(end_time).gettime();
// console.log(endtime);
var nowtime = new date().gettime();
var total_micro_second = endtime - nowtime;
var groupons = that.data.groupon;
// console.log(groupons);
groupons[param].endtime = dateformats(total_micro_second);
if (total_micro_second <= 0) {
groupons[param].endtime = "已结束"
}
that.setdata({
groupon: groupons
})
settimeout(function () {
grouponcountdown(that, end_time, param);
}, 1000)
}
// 时间格式化输出,每1s都会调用一次
function dateformats(micro_second) {
// 总秒数
var second = math.floor(micro_second / 1000);
// 天数
var day = math.floor(second / 3600 / 24);
// 小时
var hr = math.floor(second / 3600 % 24);
var hrstr = hr.tostring();
if (hrstr.length == 1) hrstr = '0' + hrstr;
// 分钟
var min = math.floor(second / 60 % 60);
var minstr = min.tostring();
if (minstr.length == 1) minstr = '0' + minstr;
// 秒
var sec = math.floor(second % 60);
var secstr = sec.tostring();
if (secstr.length == 1) secstr = '0' + secstr;
if (day <= 1) {
return "剩 " + hrstr + ":" + minstr + ":" + secstr;
} else {
return "剩 " + day + " 天 " + hrstr + ":" + minstr + ":" + secstr;
}
}
//end
var app=getapp()
page({
/**
* 页面的初始数据
*/
data: {
collageteamlist : {}
},
/**
* 生命周期函数--监听页面加载
*/
onload: function (options) {
app.showloading();
var that = this
wx.request({
success:function(res){
var grouponlist = request.data.collageteamlist
// console.log(grouponlist);
for (var i = 0; i < grouponlist.length; i++) {
var lack_num = grouponlist[i].create_num - grouponlist[i].current_num
grouponlist[i].lack_num = lack_num
}
that.setdata({
groupon: grouponlist
})
var data = that.data.groupon
//列表获取到数据进行遍历
for (var i = 0; i < data.length; i++) {
var end_time = data[i].end_time.replace(/-/g, '/')
grouponcountdown(that,end_time, i)
}
},
})
},【说明】:本文章由站长整理发布,文章内容不代表本站观点,如文中有侵权行为,请与本站客服联系(QQ:254677821)!