微信小程序---批量倒计时js方法通用

参考 微信小程序----团购或秒杀的批量倒计时实现 对倒计时countDown()方法做整理，实现通用方法，以便多个页面使用。

countDown()通用处理如下：

1.新建一个.js文件:util.js
2.在util.js 文件中 编写 countDown()方法，传入endTimeList参数（活动的结束时间数组），代码如下：

/**
* 倒计时函数
* endTimeList:活动的结束时间数组
*/
const countDown = endTimeList =>{
  console.log("lenght:"+endTimeList.length)
  // 获取当前时间，同时得到活动结束时间数组
  let newTime = new Date().getTime();
  let countDownArr = [];
  // 对结束时间进行处理渲染到页面
  for(var i=0;i<endTimeList.length;i++){
      let endTime = new Date(endTimeList[i].endTime).getTime();
      let obj = endTimeList[i];
      // 如果活动未结束，对时间进行处理
      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=timeFormat(day);
          obj.hou=timeFormat(hou);
          obj.min=timeFormat(min);
          obj.sec=timeFormat(sec);
      }else{//活动已结束，全部设置为'00'
          obj.day='00';
          obj.hou='00';
          obj.min='00';
          obj.sec='00';
      }
      countDownArr.push(obj);
  }
  // 渲染
  return countDownArr;
}

3.在util.js 文件中 导出 countDown 方法

module.exports = {
  countDown: countDown
}

4.在 需要实现倒计时的页面，引入 util.js 文件，使用util.js 文件中的countDown，处理倒计时。

util.js完整代码如下：

/**
 * 倒计时 小于10的格式化函数
 */
function timeFormat(param){//小于10的格式化函数
  return param < 10 ? '0' + param : param
}

/**
* 倒计时函数
* endTimeList:结束时间数组
*/
const countDown = endTimeList =>{
  console.log("lenght:"+endTimeList.length)
  // 获取当前时间，同时得到活动结束时间数组
  let newTime = new Date().getTime();
  let countDownArr = [];
  // 对结束时间进行处理渲染到页面
  for(var i=0;i<endTimeList.length;i++){
      let endTime = new Date(endTimeList[i].endTime).getTime();
      let obj = endTimeList[i];
      // 如果活动未结束，对时间进行处理
      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=timeFormat(day);
          obj.hou=timeFormat(hou);
          obj.min=timeFormat(min);
          obj.sec=timeFormat(sec);
      }else{//活动已结束，全部设置为'00'
          obj.day='00';
          obj.hou='00';
          obj.min='00';
          obj.sec='00';
      }
      countDownArr.push(obj);
  }
  // 渲染
  return countDownArr;
}
module.exports = {
  countDown: countDown
}

倒计时通用方法的使用：

效果图：

代码实现：
1.count-down.wxml

<!--pages/count-down/count-down.wxml-->
<view class="tui-countdown-content" wx:for="{{countDownList}}" wx:key="countDownList">
    剩余
    <text class="tui-countdown-box">{{item.day}}</text>天
    <text class="tui-countdown-box">{{item.hou}}</text>时
    <text class="tui-countdown-box">{{item.min}}</text>分
    <text class="tui-countdown-box tui-countdown-bg">{{item.sec}}</text>秒
</view>

2.count-down.js
引入 util.js 文件，使用util.countDown，处理列表数据倒计时。

// pages/count-down/count-down.js
//获取app应用实例
var app =getApp()
const util =require('../../../utils/util.js') 
Page({

  /**
   * 页面的初始数据
   */
  data: {
    xstmList:[//限时特卖
      {id:"1","endTime":"2020/07/21 10:00:43"},
      {id:"2","endTime":"2020/07/20 17:00:43"},
      {id:"3","endTime":"2020/05/01 10:00:43"}
    ],
    countDownList: [],//倒计时实时数组
    atcEndTimeList:[],//结束时间数组
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    let endTimeList = []
    //将活动的结束时间参数提成一个单独的数组，方便操作
    this.data.xstmList.forEach(o => {
      endTimeList.push(o.endTime)
    })
    this.setData({
      atcEndTimeList : endTimeList
    })
    //执行倒计时函数
    this.countDown2()
  },
  /**
   * 倒计时执行函数
   */
  countDown2(){
    let countDownList = util.countDown(this.data.xstmList)
    console.log(countDownList)
    this.setData({
      countDownList:countDownList
    })
    //然后每隔一秒执行一次倒计时函数
    setTimeout(() => {
      this.countDown2()
    }, 1000);
  }

})

3.count-down.wxss

/* pages/count-down/count-down.wxss */
page{
    background-color: #eeeeee;
}
.tui-countdown-content{
    height: 50px;
    line-height: 50px;
    text-align: center;
    background-color: #ffffff;
    margin-top: 15px;
    padding : 0 15px;
    font-size: 18px;
}
.tui-countdown-box{
    display: inline-block;
    height: 26px;
    width:26px;
    line-height: 26px;
    text-align: center;
    background-color: #000000;
    color:#ffffff;
    margin: 0 5px;
    border-radius: 4px;
}
.tui-countdown-bg{
    background-color: #f57f06;
}

4.count-down.json

{
  "navigationBarTitleText":"倒计时",
  "usingComponents": {}
}