效果传送门至 小程序代码片段

创建组件conut-down

image

组件.wxml

<!--count-down/count-down.wxml-->
<text class="c-class">{{time}}</text>

组件.js

// count-down/count-down.js
Component({
  externalClasses: ['c-class'], // 自定义样式
  /**
   * 组件的属性列表
   */
  properties: {
    target: Number, // 结束时间
    showDay: Boolean, // 是否显示天
    callback: String, // 回调
    format: Array, // 自定义格式
    clearTimer: Boolean // 清除定时器
  },

  /**
   * 组件的初始数据
   */
  data: {
    time: ''
  },

  ready () {
    this.getFormat();
  },

  /**
   * 组件的方法列表
   */
  methods: {
    init () {
      const self = this;
      setTimeout(function () {
        self.getLastTime.call(self);
      }, 1000);
    },
    getFormat () {
      const data = this.data;
      if (data.format.length === 3) data.format.splice(0, 0, '');
      this.getLastTime();
    },
    getLastTime () {
      const data = this.data;
      const gapTime = Math.ceil((data.target - new Date().getTime()) / 1000);// 距离结束还有多少秒
      let time = '00:00:00';
      let day = '00';
      const format = data.format;
      if (gapTime > 0) {
        day = this.formatNum(parseInt(gapTime / 86400)); // 天
        let lastTime = gapTime % 86400;
        const hour = this.formatNum(parseInt(lastTime / 3600)); // 时
        lastTime = lastTime % 3600;
        const minute = this.formatNum(parseInt(lastTime / 60)); // 分
        const second = this.formatNum(lastTime % 60); // 秒
        if (data.format.length > 0) {// 自定义格式处理
          time = `${data.showDay?`${day}${format[0]}`:''}${hour}${format[1]}${minute}${format[2]}${second}${format[3]}`;
        } else {
          time = `${data.showDay?`${day}:`:''}${hour}:${minute}:${second}`
        }
        if (!data.clearTimer) this.init.call(this);
      } else {
        this.endfn();
      }
      this.setData({
        time: time
      });
    },
    formatNum (num) {// 格式化
      return num > 9 ? num : `0${num}`;
    },
    endfn () {
      this.triggerEvent('callback', {});
    }
  }
})

使用

index.json

{
  "navigationBarTitleText": "倒计时",
  "usingComponents": {
    "count-down": "../count-down/count-down"
  }
}

index.wxml

<view>倒计时</view>
<count-down c-class="red" 
  target="{{targetTime}}"
  clear-timer="{{clearTimer}}"
  ></count-down>

<view>显示天数</view>
<count-down c-class="red" 
  target="{{targetTime1}}"
  show-day="{{true}}"
  clear-timer="{{clearTimer}}"
  ></count-down>

<view>执行回调</view>
<count-down c-class="red" 
  target="{{targetTime2}}"
  show-day="{{true}}"
  bindcallback="myLinsterner"
  clear-timer="{{clearTimer}}"
  ></count-down>
  
<view>自定义格式</view>
<count-down c-class="red" 
  target="{{targetTime}}"
  show-day="{{false}}"
  bindcallback="myLinsterner"
  format="{{myFormat}}"
  clear-timer="{{clearTimer}}"
  ></count-down>

<view>自定义格式</view>
<count-down c-class="red" 
  target="{{targetTime1}}"
  show-day="{{true}}"
  format="{{myFormat2}}"
  clear-timer="{{clearTimer}}"
  ></count-down>

index.js

const app = getApp()

Page({
  data: {
    targetTime: 0,
    targetTime1: 0,
    targetTime2: 0,
    myFormat: ['时', '分', '秒'],
    myFormat2: ['年', '时', '分', '秒'],
    clearTimer: false
  },
  onLoad: function () {
    this.setData({
      targetTime: new Date().getTime() + 6430000,
      targetTime1: new Date().getTime() + 1116430000,
      targetTime2: new Date().getTime() + 10000
    });
  },
  onUnload() {
    this.setData({
        clearTimer: true
    });
  },
  myLinsterner () {
    console.log("结束回调")
  }
})

index.wxss

/* 自定义样式 */
.red {
  color: tomato;
}

end

image