微信小程序实现批量倒计时功能

微信(小程序)  /  管理员 发布于 3年前   263

本文实例为大家分享了微信小程序实现批量倒计时的具体代码，供大家参考，具体内容如下

//适用于商品列表倒计时/** * end_time int 结束时间 * param int 数组键 */

1.展示效果如下：

2.wxml代码：

<pclass="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)       
}     
},   
}) 
},