微信小程序 列表倒计时

最近要实现一个列表倒计时的功能，写了个demo

展示图

　　

<view class="center colu">
  <view class="time" wx:for='{{list}}' style="color:{{item.color}}">{{item.show_time}}</view>
</view>

Page({

  /**
   * 页面的初始数据
   */
  data: {
    list: []
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function(options) {
    let datas = [];
    let current = new Date().getTime() / 1000;for (let i = 0; i < 5; i++) {
      datas.push({})
    }
    for (let i in datas) {
      let color = this.randomColor();
      let random = Math.random().toFixed(2) * 10000;
      datas[i].timer = setInterval(() => {
        //截止时间
        let time = current + random;
        time--;
        let now = new Date().getTime();
        let diff = parseInt(time - now / 1000);
        if (diff < 0) {
          let list = this.data.list;
          clearInterval(list[i].timer)
          this.setData({
            list
          })
        } else {
          let date = this.formattime(diff * 1000);
          datas[i].show_time = date;
          datas[i].color = color;
          this.setData({
            list: datas
          })
        }
      }, )
    }
  },
  randomColor() {
    var r = Math.floor(Math.random() * 256);
    var g = Math.floor(Math.random() * 256);
    var b = Math.floor(Math.random() * 256);
    return "rgb(" + r + ',' + g + ',' + b + ")";
  },
  formattime(time) {
    var leave1 = time % (24 * 3600 * 1000) //计算小时
    var hour = Math.floor(leave1 / (3600 * 1000))

    var leave2 = leave1 % (3600 * 1000) //计算分钟
    var minute = Math.floor(leave2 / (60 * 1000))

    var leave3 = leave2 % (60 * 1000) //计算秒
    var second = Math.round(leave3 / 1000) == '60' ? '00' : Math.round(leave3 / 1000)
    return [hour, minute, second].map(this.formatNumber).join(':')
  },
  formatNumber(n) {
    n = n.toString()
    return n[1] ? n : '0' + n
  },
})