微信小程序倒计时组件

wxml:

        {{day}}
        天
        {{hour}}
        时
        {{minutes}}
        分
        {{seconds}}
        秒

js部分:

interface IData {
  day: string | number;
  hour: string | number;
  minutes: string | number;
  seconds: string | number;
  result: string;
  lastTime: number;
  timer: any;
  leftTime: number;
}

Component({
  properties: {
    target: {
      type: Number,
      observer(n, o) {
        this.setData({
          leftTime: n,
        });
      },
    },
  },
  /**
   * 组件的初始数据
   */
  data: {
    day: "", //天
    hour: "", //时
    minutes: "", //分
    seconds: "", //秒
    result: "", //自定义格式返回页面显示结果
    timer: null,
    leftTime: 0, //倒计时的时间错
  },
  lifetimes: {
    attached() {
      //组件创建时
      //开启定时器
      this.tick();
    },

    detached() {
      //组件销毁时清除定时器 防止爆栈
      clearTimeout(this.data.timer);
    },
  },

  /**
   * 组件的方法列表
   */
  methods: {
    //定时事件
    tick: function() {
      const dy = Math.floor(this.data.leftTime / 60 / 60 / 24);
      const hr = Math.floor((this.data.leftTime / 3600) % 24);
      const min = Math.floor((this.data.leftTime / 60) % 60);
      const sec = Math.floor(this.data.leftTime % 60);
      // 渲染倒计时时钟
      this.setData({
        day: dy < 10 ? "0" + hr : hr,
        hour: hr < 10 ? "0" + hr : hr,
        minutes: min < 10 ? "0" + min : min,
        seconds: sec < 10 ? "0" + sec : sec,
      });
      this.data.timer = setTimeout(() => {
        if (this.data.leftTime <= 0) {
          this.onEnd();
          return;
        }
        this.data.leftTime -= 1;
        this.tick();
      }, 1000);
    },

    //时间结束回调事件
    onEnd: function() {
      this.triggerEvent("onEnd");
    },
  },
});

页面调用：

    支付倒计时：