微信小程序倒计时

今天做程序要做个限时抢购的功能如图：



先上代码：

源码

index.wxml 可根据自己实际需求改改

<view class="div-content-warp">
<block wx:for="{{xsqg}}" wx:key="*this">
<view class="div-qgcontent">
<view class='img-absolute'>
<view class='red padtop10'>
<image class='time-img' src="../../image/img/time.png"></image>
<text class='time'> {{clock[index]}} </text>
</view>
<view class="category-url" bindtap="cateTap" data-cateId="{{item.id}}">
<image class="img-limet" src="../../image/img/xian1.png"></image>
<image class="shop" src="{{item.pic}}"></image>
<view class='del'>原价:{{item.yj}}</view>
<view class='red qgj'>抢购价:{{item.lowest}}</view>
</view>
</view>
</view>
</block>
</view>

由于 他是4个倒计时并且每个还是单独的倒计时 所以用了数组  在循环的时候通过数组的key取值 {{clock[index]}}
index.js

Page({
data: {
clock: []
},
onLoad: function (options) {
var that = this;
util.http("https://www.***.com/index.html", "", this.product);
},
product: function (data) {
console.log(data);
this.setData({
xsqg: data.xsqg
})

var interval = setInterval(function () {
//将时间传如 调用
var clock = forea(data.xsqg);

this.setData({//正常倒计时
clock: clock
});
}.bind(this), 1000);
}

})
function forea(timetot) {
var clockarr = [];
var timenow = Date.parse(new Date()) / 1000;
for (var i = 0; i < 4; i++) {

var totalSecond = timetot[i].end_time - timenow;
var totalstart = timetot[i].start_time - timenow;
if (totalstart > 0) {
var time = '未开始';
} else if (totalSecond < 0) {
var time = '已结束';
} else {
var time = dateformat(totalSecond);
}
clockarr.push(time);
}
return clockarr;
}

// 时间格式化输出，将时间戳转为 倒计时时间
function dateformat(micro_second) {

var second = micro_second;//总的秒数

// 天数位
var day = Math.floor(second / 3600 / 24);
var dayStr = day.toString();
if (dayStr.length == 1) dayStr = '0' + dayStr;

// 小时位
//var hr = Math.floor(second / 3600 % 24);
var hr = Math.floor(second / 3600);  //直接转为小时 没有天 超过1天为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;

return hrStr + ":" + minStr + ":" + secStr;

}

难点就是一个的话好控制，4个需要同时倒计,怎么才能同时刷？？

思路：

将倒计时的时间放入数组封装成方法 然后用 setInterval调用每1000毫秒调用一次。

在做的过程中出现的问题：

（1）把for 循环写在了setInterval 中只执行一次 不知道为什么

（2）数组每次都循环但是 数组里面的值不变？？ 后来把他单独摘出来 分开调用

有不对的地方，大家批评指正。