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

深藏阁楼爱情的钟 2022-11-20 08:21 134阅读 0赞

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNTQzMjY0_size_16_color_FFFFFF_t_70][]

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>

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)
      },
    })

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNTQzMjY0_size_16_color_FFFFFF_t_70]: /images/20221120/156810964d6849fdaace28d65c28b7f0.png