网站开发app营销培训机构哪家最专业

参考 微信小程序----团购或秒杀的批量倒计时实现 对倒计时countDown()方法做整理，实现通用方法，以便多个页面使用。

countDown()通用处理如下：

1.新建一个.js文件:util.js
2.在util.js 文件中 编写 countDown()方法，传入endTimeList参数（活动的结束时间数组），代码如下：

/**
* 倒计时函数
* endTimeList:活动的结束时间数组
*/
const countDown = endTimeList =>{console.log("lenght:"+endTimeList.length)// 获取当前时间，同时得到活动结束时间数组let newTime = new Date().getTime();let countDownArr = [];// 对结束时间进行处理渲染到页面for(var i=0;i<endTimeList.length;i++){let endTime = new Date(endTimeList[i].endTime).getTime();let obj = endTimeList[i];// 如果活动未结束，对时间进行处理if (endTime - newTime > 0){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=timeFormat(day);obj.hou=timeFormat(hou);obj.min=timeFormat(min);obj.sec=timeFormat(sec);}else{//活动已结束，全部设置为'00'obj.day='00';obj.hou='00';obj.min='00';obj.sec='00';}countDownArr.push(obj);}// 渲染return countDownArr;
}

3.在util.js 文件中 导出 countDown 方法

module.exports = {countDown: countDown
}

4.在 需要实现倒计时的页面，引入 util.js 文件，使用util.js 文件中的countDown，处理倒计时。

util.js完整代码如下：

/*** 倒计时 小于10的格式化函数*/
function timeFormat(param){//小于10的格式化函数return param < 10 ? '0' + param : param
}/**
* 倒计时函数
* endTimeList:结束时间数组
*/
const countDown = endTimeList =>{console.log("lenght:"+endTimeList.length)// 获取当前时间，同时得到活动结束时间数组let newTime = new Date().getTime();let countDownArr = [];// 对结束时间进行处理渲染到页面for(var i=0;i<endTimeList.length;i++){let endTime = new Date(endTimeList[i].endTime).getTime();let obj = endTimeList[i];// 如果活动未结束，对时间进行处理if (endTime - newTime > 0){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=timeFormat(day);obj.hou=timeFormat(hou);obj.min=timeFormat(min);obj.sec=timeFormat(sec);}else{//活动已结束，全部设置为'00'obj.day='00';obj.hou='00';obj.min='00';obj.sec='00';}countDownArr.push(obj);}// 渲染return countDownArr;
}
module.exports = {countDown: countDown
}

倒计时通用方法的使用：

效果图：

代码实现：
1.count-down.wxml

<!--pages/count-down/count-down.wxml-->
<view class="tui-countdown-content" wx:for="{{countDownList}}" wx:key="countDownList">剩余<text class="tui-countdown-box">{{item.day}}</text>天<text class="tui-countdown-box">{{item.hou}}</text>时<text class="tui-countdown-box">{{item.min}}</text>分<text class="tui-countdown-box tui-countdown-bg">{{item.sec}}</text>秒
</view>

2.count-down.js
引入 util.js 文件，使用util.countDown，处理列表数据倒计时。

// pages/count-down/count-down.js
//获取app应用实例
var app =getApp()
const util =require('../../../utils/util.js') 
Page({/*** 页面的初始数据*/data: {xstmList:[//限时特卖{id:"1","endTime":"2020/07/21 10:00:43"},{id:"2","endTime":"2020/07/20 17:00:43"},{id:"3","endTime":"2020/05/01 10:00:43"}],countDownList: [],//倒计时实时数组atcEndTimeList:[],//结束时间数组},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {let endTimeList = []//将活动的结束时间参数提成一个单独的数组，方便操作this.data.xstmList.forEach(o => {endTimeList.push(o.endTime)})this.setData({atcEndTimeList : endTimeList})//执行倒计时函数this.countDown2()},/*** 倒计时执行函数*/countDown2(){let countDownList = util.countDown(this.data.xstmList)console.log(countDownList)this.setData({countDownList:countDownList})//然后每隔一秒执行一次倒计时函数setTimeout(() => {this.countDown2()}, 1000);}})

3.count-down.wxss

/* pages/count-down/count-down.wxss */
page{background-color: #eeeeee;
}
.tui-countdown-content{height: 50px;line-height: 50px;text-align: center;background-color: #ffffff;margin-top: 15px;padding : 0 15px;font-size: 18px;
}
.tui-countdown-box{display: inline-block;height: 26px;width:26px;line-height: 26px;text-align: center;background-color: #000000;color:#ffffff;margin: 0 5px;border-radius: 4px;
}
.tui-countdown-bg{background-color: #f57f06;
}

4.count-down.json

{"navigationBarTitleText":"倒计时","usingComponents": {}
}