微信小程序setTimeout实现循环倒计时(根据自己需求写的, 分享一下,有什么问题请指教)

我们先来看一下效果图,我不知道怎么弄动态的,也没时间研究,将就着看吧

wxml

<view class="like-overall">
        <view class="like-chunk back" wx:for="{{list}}" wx:key="index">
          <view class="like-image-over" >
            <image class="like-img" src="{{item.image}}"></image>
          </view>
          <view class="like-chunk-title size-twenty-five">{{item.title}}</view>
          <view class="like-chunk-price size-twenty-five">
            <view class="icon-price">¥ </view>
            <view class="price">{{item.price}}</view>
          </view>
          <view>{{item.count_down.hou}}:{{item.count_down.min}}:{{item.count_down.sec}}</view>
        </view>
      </view>

js

Page ({
    data: {
        list: [
      {
        title: "华为手机5G",
        image: "cloud://wsp-d2dy4.7773-wsp-d2dy4-1301066571/tds/d40b253c2d5dd31c.jpg!q70.jpg",
        price: "4999.00",
        characteristic: "",
        end_time: "2020/11/28 00:10:01"
      },
      {
        title: "华为手机5G",
        image: "cloud://wsp-d2dy4.7773-wsp-d2dy4-1301066571/tds/d40b253c2d5dd31c.jpg!q70.jpg",
        price: "4999.00",
        end_time: "2020/11/28 01:20:02"
      },
      {
        title: "华为手机5G",
        image: "cloud://wsp-d2dy4.7773-wsp-d2dy4-1301066571/tds/d40b253c2d5dd31c.jpg!q70.jpg",
        price: "4999.00",
        end_time: "2020/11/28 02:30:03"
      },
      {
        title: "华为手机5G",
        image: "cloud://wsp-d2dy4.7773-wsp-d2dy4-1301066571/tds/d40b253c2d5dd31c.jpg!q70.jpg",
        price: "4999.00",
        end_time: "2020/11/28 03:40:04"
      }
    ],
    },
    /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    // 执行倒计时函数
    this.countDown();
  },
  timeFormat(param) {//小于10的格式化函数
    return param < 10 ? '0' + param : param;
  },
  countDown: function() {
    // 获取当前时间, 同样得到活动结束时间数组
    let newTime = new Date().getTime();         // 当前时间
    let endTimeList = this.data.list;
    let countDownArr = [];
    endTimeList.forEach(i => {
      let endTime = new Date(i.end_time).getTime();
      let obj = null;
      // 如果活动未结束，对时间进行处理
      if (endTime - newTime > 0) {
        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)
        }
      } else {//活动已结束，全部设置为'00'
        obj = {
          day: '00',
          hou: '00',
          min: '00',
          sec: '00'
        }
      }
      i.count_down = obj
    })
    // 渲染，然后每隔一秒执行一次倒计时函数
    this.setData({ list: endTimeList })
    setTimeout(this.countDown, 1000);
    // console.log(endTimeList)
  },
})

以上就是实现代码,有什么问题可以下方留言