[js]微信小程序商品抢购倒计时

js部分
// pages/qianggou/qianggou.js
Page({

/**
* 页面的初始数据
*/
data: {
goodsList:[
{ actEndTime: '2018-12-09 10:00:43' },
{ actEndTime: '2018-12-09 11:00:00' },
{ actEndTime: '2018-12-09 12:45:56' },
{ actEndTime: '2018-12-09 15:00:23' },
{ actEndTime: '2018-12-23 17:00:22' },
{ actEndTime: '2018-12-14 19:00:44' },
{ actEndTime: '2018-12-21 21:00:34' },
{ actEndTime: '2018-12-17 09:00:37' },
{ actEndTime: '2018-12-21 05:00:59' },
{ actEndTime: '2018-12-19 07:00:48' },
{ actEndTime: '2018-12-28 03:00:11' }
],
countDownList:[], //最终渲染数据
actEndTimeList: [] //存储结束时间
},

/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
let EndTimeList = []; //存储结束时间
//将存储时间存放在临时数组
this.data.goodsList.forEach(data=>{
EndTimeList.push(data.actEndTime)
})
this.setData({
actEndTimeList:EndTimeList
})
this.countDown()
},
//处理时间为个位数，加0在前面
timeFormat(param) {//小于10的格式化函数
return param < 10 ? '0' + param : param;
},
//倒计时函数
countDown(){
//获取当前时间
let newTime = new Date().getTime(); //getTime 返回的是格林威治时间
let endTimeList = this.data.actEndTimeList; //获取时间
let countDownArr = []; //存储时间
let obj = null
//对结束时间进行处理，并渲染到页面
endTimeList.forEach(x=>{
let EndTime = new Date(x).getTime();
let time = (EndTime - newTime) / 1000; //获取结束时间总秒数
//获取 天 时 分 秒
let day = Math.round(time/(60*60*24));//取得天数
let hou = Math.round(time % (60 * 60 * 2) / 3600); //取得小时
let min = Math.round(time % (60 * 60 * 24) % 3600 / 60);//取得分钟
let sec = Math.round(time % (60 * 60 * 24) % 3600 % 60); //取得秒数
obj = {
day: this.timeFormat(day),
hou: this.timeFormat(hou),
min: this.timeFormat(min),
sec: this.timeFormat(sec)
}
countDownArr.push(obj);//将时间存入数组
})
this.setData({
countDownList: countDownArr
})
setTimeout(this.countDown,1000)
}
})
HTML部分
<!--index.wxml--><view>
<view class='tui-countdown-content' wx:for="pw_countDownList" wx:key="countDownList">剩余
<text class='tui-conutdown-box'>pw_item.day</text>天<text class='tui-conutdown-box'>pw_item.hou</text>时
<text class='tui-conutdown-box'>pw_item.min</text>分<text class='tui-conutdown-box tui-countdown-bg'>pw_item.sec</text>秒
</view></view>





实现原理：
1.首先通过getTime方法获取格林威治时间，然后用forEach循环出结束时间的格林威治时间。
用结束时间去减去当前时间。然后通过转换的到秒数，最终渲染到页面上！

跟着学到一波操作

又学到一波操作 哈哈哈..