微信小程序单个和循环倒计时

微信小程序倒计时：单个，多个循环倒计时

<view>
  <!-- 单个倒计时 -->
  <view>单个倒计时：</view>
  <view class="common common1">
    <view>{{day}}天{{hour}}时{{minute}}分{{second}}秒</view>
  </view>

  <view class="line"></view>

  <!-- 循环倒计时 -->
  <!-- 方法一 -->
  <view>循环倒计时：方法一</view>
  <view wx:for="{{listArr}}" wx:key="index" class="common">
    <view>{{item.count_down.day}}天{{item.count_down.hou}}时{{item.count_down.min}}分{{item.count_down.sec}}秒</view>
  </view>

  <view class="line"></view>

  <!-- 方法二 -->
  <view>循环倒计时：方法二</view>
  <view wx:for="{{goodArr}}" wx:key="index" class="common common3">
    <view>{{item.countDown}}</view>
  </view>
</view>

.common view{
  background: pink;
  margin: 20rpx 0;
  height: 100rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.common1 view{
  background: darkcyan;
}

.common3 view{
  background: cornflowerblue;
}

.line{
  width: 100%;
  height: 10rpx;
  background: green;
  margin-bottom: 20rpx;
}

Page({
  data: {
    // 单个倒计时
    time_diff:60000,

    // 循环倒计时：方法一
    listArr: [
      {id:1,end_time:'2022/12/18 17:20:30'},
      {id:2,end_time:'2022/11/17 15:36:10'},
      {id:3,end_time:'2022/10/20 18:02:46'},
    ],

    // 循环倒计时：方法二
    goodArr: [
      {id:1,time:'6000000'},
      {id:2,time:'620000'},
      {id:3,time:'30000'},
    ],
  },

  // 单个倒计时
  countDown_one: function () {
    var that = this;
    var now_time = that.data.time_diff;            
    this.data.intervarID = setInterval(function () {
      now_time--
      let d = Math.floor((now_time - (now_time % 86400)) / 86400)
      let h = Math.floor((now_time % 86400) / 3600)
      let m = Math.floor((now_time % 3600) / 60)
      let s = now_time % 60
      that.setData({
        day: d,
        hour: h,
        minute: m,
        second: s
      })
      //倒计时结束,清除定时器
      if (d <= 0 && h <= 0 && m <= 0 && s <= 0) {
        clearInterval(that.data.intervarID);
      }
    }, 1000
    )
  },

  // 循环倒计时：方法一
  countDown: function() {
    let newTime = new Date().getTime();         
    let endTimeList = this.data.listArr;
    endTimeList.forEach(i => {
      let endTime = new Date(i.end_time).getTime();
      let obj = null;
      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: this.timeFormat(day),
        hou: this.timeFormat(hou),
        min: this.timeFormat(min),
        sec: this.timeFormat(sec)
      }
      i.count_down = obj
      if(i.count_down.day=='00'&&i.count_down.hou=='00'&&i.count_down.min=='00'&&i.count_down.sec=='00'){
        console.log('计时结束')
        // 根据需求操作数据：比如刷新页面
      }
    })
    this.setData({ listArr: endTimeList })
    setTimeout(this.countDown, 1000);         
  },

  timeFormat(param) {
    return param < 10 ? '0' + param : param;
  },


  // 循环倒计时：方法二
  setCountDown22: function () {
    var that = this
    let time = 1000;
    that.data.goodArr.map((v, i) => {
      if (v.time == 0) {
        console.log('计时结束')
        // 根据需求操作
      }
      let formatTime = this.getFormat22(v.time)
      v.time -= time;
      v.countDown = `${formatTime.hh}:${formatTime.mm}:${formatTime.ss}`;
      return v
    })
    this.setData({
      goodArr: that.data.goodArr
    })
    setTimeout(that.setCountDown22, 1000)
  },
  
  getFormat22: function (msec) {
    let ss = parseInt(msec / 1000);
    let ms = parseInt(msec % 1000);
    let mm = 0;
    let hh = 0;
    if (ss > 60) {
      mm = parseInt(ss / 60);
      ss = parseInt(ss % 60);
      if (mm > 60) {
        hh = parseInt(mm / 60);
        mm = parseInt(mm % 60);
      }
    }
    ss = ss > 9 ? ss : `0${ss}`;
    mm = mm > 9 ? mm : `0${mm}`;
    hh = hh > 9 ? hh : `0${hh}`;
    return {
      ss,
      mm,
      hh
    };
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {   
    this.countDown_one()
    this.countDown()
    this.setCountDown22()
  },
})