【实用技巧】微信小程序循环中实现多个倒计时，让你轻松管理时间！

前言

在我们日常开发中，常常要实现一些倒计时操作，如：秒杀倒计时，考试测验，体育赛事等等。但往往这些可能只需要展示一个倒计时这样子，那么我们要如何实现在循环中实现多条数据的倒计时呢？那么我们来看看如何实现如下图效果吧！文末源码

代码实现

首先我门在js文件的data中先定义好页面需要展示的变量

data: {    //站点数据数组,从后端获取，主要包括站点名称及最近一站信息    quicklyData:[],    //用来保存站点跟倒计时的对应关系数组    timesout:[]  },

然后在js文件的onShow方法调用后端获取站点信息的接口，返回的数据有：站点名称，最近一列到站时间等等。

/**   * 生命周期函数--监听页面显示   */  onShow() {    //请求后端接口    API.getQuicklyTimes().then(resp=>{     //设置页面barTitle今天是工作日还是周六日      wx.setNavigationBarTitle({        title: '21快线('+resp.data.data[0].runTime+')',      })     //拿到接口，设置每个站点默认的倒计时对象为00:00(避免打开页面时显示空的问题)      let qd = resp.data.data      var obj = {}      for(let i=0;i<qd.length;i++){        let bs = qd[i].busStopVoList        for(let j=0;j<bs.length;j++){            obj = {            min: "00",            sec: "00",            kdl:''          }          bs[j].time = obj        }      }      this.setData({        quicklyData: qd      })      //添加倒计时器      this.addTimer()    })  },

获取到站点数据以后，给每个站点都添加一个倒计时器

addTimer(){    //拿到data中的数据    let qd = this.data.quicklyData    let that = this    for(let i=0;i<qd.length;i++){      let bs = qd[i].busStopVoList      for(let j=0;j<bs.length;j++){         //默认设置每个站点显示为等待进站状态，并设置对应样式         this.setData({          ['quicklyData['+i+'].busStopVoList['+j+'].remark']:'进站',          ['quicklyData['+i+'].busStopVoList['+j+'].desc']:'spanCls1'         })         //拿到站点到站时间，如果为空则代表是列车没运营         let countdown = bs[j].countDown         if(countdown){           //如果时间不为空，则新增一个每秒执行的定时器，并push到timesout数组中          let timeIntervalSeveral = setInterval(function() {            //1秒执行一次的方法。也就是倒计时方法            that.timer(i,j,bs[j],countdown)           }, 1000);           let tobj = {'stopId':bs[j].id,'interval':timeIntervalSeveral}           this.data.timesout.push(tobj)         }              }    }    
 },

倒计时方法进行每秒倒计时，及处理倒计时结束后需要执行的操作

timer(i,j,stopObj,countDown){    let that = this    var nowTime = new Date().getTime();//当前时间时间戳    //站点倒计时时间减去当前时间即为倒计时时间    let time = (countDown - nowTime) / 1000;    var obj={}    // 如果倒计时大于0，则需要倒计时，控制时间为多少秒，改变后重新push到展示在页面的数组中      if (time > 0) {        var min = parseInt(time % (60 * 60 * 24) % 3600 / 60);        var sec = parseInt(time % (60 * 60 * 24) % 3600 % 60);        obj = {          min: that.timeFormat(min),          sec: that.timeFormat(sec),          kdl: min<3?min<1?'ydl':'kdl':'djs'        }        that.setData({          ['quicklyData['+i+'].busStopVoList['+j+'].time']:obj        })      } else { //倒计时结束，都变为00，且进站样式改为进站中        obj = {          min: "00",          sec: "00",          kdl:''        }        that.setData({          ['quicklyData['+i+'].busStopVoList['+j+'].time']:obj,          ['quicklyData['+i+'].busStopVoList['+j+'].remark']:'列车进站中~~',          ['quicklyData['+i+'].busStopVoList['+j+'].desc']:'spanCls',        })//获取当前结束倒计时的倒计时对象，要把它clear掉，不然还会一直执行。        let tobj = that.data.timesout        let interval = undefined        for(let i=0;i<tobj.length;i++){          if(tobj[i].stopId == stopObj.id){            interval = tobj[i].interval            break;          }        }//倒计时结束要重新获取下一次的倒计时时间        that.jz(stopObj.id)        if(interval){          clearInterval(interval)        }
     }  },倒计时结束重新获取下一次需要倒计时的时间，并进行展示到这里，倒计时的整个js实现过程就完成了。下面是展示的页面，这里用到了Vantweapp组件。不得不说这个UI组件实在太好用了。喜欢大家可以看看他的api文档（https://vant-contrib.gitee.io/vant-weapp）

<!-- <van-notice-bar scrollable color="#ff6633" background="#fff" text="因更新延迟,可能导致有误,请您预留充分时间哟..." mode="closeable"  /> --><van-tabs active="{{ active }}" border="{{true}}" swipeable color="#72a7d4">  <van-tab wx:for="{{quicklyData}}" wx:for-index="index" title="{{item.endStation}}方向">    <van-collapse accordion value="{{activeNames}}" wx:for="{{item.busStopVoList}}" wx:for-index='stopIndex' wx:for-item="stop" wx:key="idx" bind:change="onChangeStop" data-index="{{stopIndex}}" data-stopId="{{stop.id}}">      <van-collapse-item  name="{{stop.id}}">        <view slot="title"><span style="color: black;font-weight: 700;font-size: 35rpx;">{{stop.text}}</span>          <span wx:if="{{stop.nextTimes!=null && stop.nextTime!=''}}" style="font-size: 30rpx;">[下一趟:<span style="font-weight: 600;font-size: 32rpx;">{{stop.nextTimes}}</span>]</span>        <span style="display: flex;" class="span" wx:if="{{stop.countDown!=null && stop.countDown>0}}"><span class="{{stop.time.kdl}}">{{stop.time.min}} 分 </span><span class="{{stop.time.kdl}}" style="margin-left: 5px;"> {{stop.time.sec}} 秒</span><span class="{{stop.desc}}">{{stop.remark}}</span>        </span>        <view style="overflow-wrap:break-word;" wx:else="{{stop.countDown===null || stop.countDown===''}}">        <span style="color:rgb(255, 81, 0);font-size: 30rpx;" >          亲,快线停运啦!        </span>      </view>        </view>              <van-tag style="margin-left:5px;" class="{{timeItem.style==='warning'?'tag':''}}" type="{{timeItem.style}}" wx:for="{{stop.times}}" wx:for-index="timeIndex" wx:for-item="timeItem">{{timeItem.times}}</van-tag>      </van-collapse-item>    </van-collapse>  </van-tab></van-tabs><view style="color: gray;width: 100%;height: 50px;margin-top: 20px;text-align: center;">  <view>本程序数据仅供参考</view><view>搭乘时请以站内广播或者电视屏幕上的地铁信息为准</view></view>

点击小程序，进入21快线即可看到效果展示

样式文件会一起放在源码中一起打包。欢迎大家吐槽及学习。点击关注我，更多好玩有用实战分享给你。公众号发送:"倒计时"获取源码点击下方公众号 · 关注我| HAPPY WOMEN'S DAY

NO.1往期回顾