微信小程序倒計時

今天做程序要做個限時搶購的功能如圖：

先上代碼：

源碼

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）數組每次都循環但是 數組里面的值不變？？ 后來把他單獨摘出來 分開調用

有不對的地方，大家批評指正。