微信小程序——多个倒计时功能

 效果：

页面数据

  //奖品信息
  PrizeList: [{
      ID: 0, 
      EndTime: '2020/11/01 10:10:10',
      TimeText: '',
      IsFinish: false
    },
    {
      ID: 1,  
      EndTime: '2020/11/02 11:11:11',
      TimeText: '',  
      IsFinish: false
    },
    {
      ID: 2,
      EndTime: '2020/11/03 12:12:12',
      TimeText: '',    
      IsFinish: false
    },
    {
      ID: 3,
      EndTime: '2020/11/04 13:13:13',
      TimeText: '',
      IsFinish: false
    }
  ],

html

<view class="content-prize-list">
  <block wx:for="{{PrizeList}}" wx:key="key">
     <view class="end-time-lay">{{item.TimeText}}  后截止</view>
  </block>
</view>

js（重点）

// pages/home/home.js
const app = getApp();
const dataList = require('../../utils/dataList.js');

Page({

  /**
   * 页面的初始数据
   */
  data: {
    //奖品信息
    PrizeList: [],
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    let _this = this;
    _this.setData({
      PrizeList: dataList.Data.PrizeList,
    })

    //_this.computeSecond('2020/06/02 21:30:00', 0);
    _this.data.PrizeList.forEach((item, index) => {
      _this.computeSecond(item.EndTime, index);
    });
  },

 
  /**
   * 计算秒数
   * 
   * 秒数 = 截止时间 -  当前时间
   */
  computeSecond(date, index) {
    let _this = this;
    let localDate = new Date();
    let endTime = new Date(date);
    //计算秒数，取数据只取当月的，所以从天开始
    let seconds = (endTime.getTime() - localDate.getTime()) / 1000;
   
    let timer = 'timer' + index;
    let strTimeText = 'PrizeList[' + index + '].TimeText';
    let strIsFinish = 'PrizeList[' + index + '].IsFinish';

    if (seconds && seconds > 0) {
      //抽奖还在进行中
      _this.CountDown(seconds, timer, res => {
        if (res) {
          _this.setData({
            [strTimeText]: res
          })
        }
      })
    } else {
      //抽奖已结束
      _this.setData({
        [strIsFinish]: true
      })
    }
  },

  //计时器
  CountDown(maxtime, timer, fn) {
    timer: setInterval(function () {
      if (maxtime) {
        let day = Math.floor(maxtime / 86400),
          hour = Math.floor((maxtime % 86400) / 3600),
          minutes = Math.floor((maxtime % 3600) / 60),
          seconds = Math.floor(maxtime % 60),
          msg = day + "天" + hour + "时" + minutes + "分" + seconds + "秒";
        fn(msg);
        maxtime--;
      } else {
        clearInterval(timer);
      }
    }, 1000)
  },

})