微信小程序活动倒计时

代码

引用页：

{
  "usingComponents": {
    
    "dataTime": "../../../component/dataTime/index"
  }
}

<block wx:for="{
         
  {body}}"><countDown bind:onEnd="getPageList" format="{
         
  {formatTime}}" target="{
         
  {item.createDateNum}}" /></block>

const formatChinaDate = mss => {
  let days = parseInt(mss / (1000 * 60 * 60 * 24));
  let hours = parseInt((mss % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  let minutes = parseInt((mss % (1000 * 60 * 60)) / (1000 * 60));
  let seconds = parseInt((mss % (1000 * 60)) / 1000);
  return days +  天  + hours +  小时  + minutes +  分钟  + seconds +  秒 ;
};
Page({
  data: {
    formatTime: formatChinaDate,

  },

  getPageList: function () {
    //倒计时结束啦
    console.log(倒计时结束啦)
  },
  onLoad: function (options) {
    let list = [{
      id: "07937f9bed394731836b5530f98762a2",
      createDate: "2020-09-16 17:25:12",
     
    }, {
      id: "e60fda068db141f3b484bad347803290",
      createDate: "2020-09-21 17:24:46",
    
    }, {
      id: "f009718a892b442a85ee1567868c99c1",
      createDate: "2020-09-21 17:22:50",
     
    }, {
      id: "f936e612f2304475b69402b319d896c0",
      createDate: "2020-09-21 17:19:05",
     
    }, {
      id: "77f4f1686c514a06b6786c33f8d7ee7f",
      createDate: "2020-09-21 17:15:37",
    
    }, {
      id: "91eba6b9208d46cc860b400060e40004",
      createDate: "2020-09-21 14:24:39",
    
    }]
    for (let i = 0; i < list.length; i++) {
      console.log(list[i])
      // (1000 * 60 * 60 * 24)  24小时时间戳
      let createDateNum = new Date(list[i].createDate).getTime() + (1000 * 60 * 60 * 24)
  
      list[i].createDateNum=createDateNum
    }
    this.setData({
      body:list
    })
  },


})

new Date(list[i].createDate).getTime()-------------------将时间转为时间戳

(1000 * 60 * 60 * 24)----------24小时时间戳

模板页

var timer = 0;
var interval = 1000;
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    target: {
      type: String,
    },
    format: {
      type: Function,
      default: null
    }
  },
 
  lifetimes: {
    attached() {
      //组件创建时
      this.setData({
        lastTime: this.initTime(this.properties).lastTime,  //根据 target 初始化组件的lastTime属性
      }, () => {
        //开启定时器
        this.tick();
        //判断是否有format属性 如果设置按照自定义format处理页面上显示的时间 没有设置按照默认的格式处理
        if (typeof this.properties.format === object) {
          this.defaultFormat(this.data.lastTime)
        }
      })
    },
 
    detached() {
      //组件销毁时清除定时器 防止爆栈
      clearTimeout(timer);
    },
  },
 
  /**
   * 组件的初始数据
   */
  data: {
    d: 0, //天
    h: 0, //时
    m: 0, //分
    s: 0, //秒
    result: ,  //自定义格式返回页面显示结果
    lastTime:  //倒计时的时间错
  },
 
  /**
   * 组件的方法列表
   */
  methods: {
    //默认处理时间格式
    defaultFormat: function(time) {
      const day = 24 * 60 * 60 * 1000
      const hours = 60 * 60 * 1000;
      const minutes = 60 * 1000;
 
      const d = Math.floor(time / day);
      const h = Math.floor((time - d * day) / hours);
      const m = Math.floor((time - d * day - h * hours) / minutes);
      const s = Math.floor((time - d * day - h * hours - m * minutes) / 1000);
      this.setData({
        d,
        h,
        m,
        s
      })
    },
    //定时事件
    tick: function() {
      let {
        lastTime
      } = this.data;
 
      timer = setTimeout(() => {
        if (lastTime < interval) {
          clearTimeout(timer);
          this.setData({
              lastTime: 0,
              result: 
            },
            () => {
              this.defaultFormat(lastTime)
              if (this.onEnd) {
                this.onEnd();
              }
            }
          );
        } else {
          lastTime -= interval;
          this.setData({
              lastTime,
              result: this.properties.format ? this.properties.format(lastTime) : 
            },
            () => {
              this.defaultFormat(lastTime)
              this.tick();
            }
          );
        }
      }, interval);
    },
 
    //初始化时间
    initTime: function(properties) {
      let lastTime = 0;
      let targetTime = 0;
      try {
        if (Object.prototype.toString.call(properties.target) === [object Date]) {
          targetTime = Number(properties.target).getTime();
        } else {
          targetTime = new Date(Number(properties.target)).getTime();
        }
      } catch (e) {
        throw new Error(invalid target properties, e);
      }
 
      lastTime = targetTime - new Date().getTime();
      return {
        lastTime: lastTime < 0 ? 0 : lastTime,
      };
    },
    //时间结束回调事件
    onEnd: function() {
      this.triggerEvent(onEnd);
    }
  }
})

<view class="count-down">
  <text wx:if="{
         
  {result!==}}">{
         
  {result}}</text>
  <block wx:else>
    <text wx:if="{
         
  {comm.numberToFixed(d)>0}}">{
         
  {d}}天</text>
    <text>{
         
  {utils.fixedZero(h)}}</text>
    <text style="font-weight: 500">:</text>
    <text>{
         
  {utils.fixedZero(m)}}</text>
    <text style="font-weight: 500">:</text>
    <text>{
         
  {utils.fixedZero(s)}}</text>
  </block>
</view>