在微信小程序中使用class类实现倒计时功能

在微信小程序中，你可以通过使用类的方式来实现倒计时功能。通过在页面中重复使用 Countdown 类就可以实现页面的不同计时需求。

主要要注意的是：

1.在初始化 Countdown 实例时，通过传递页面对象（this）和倒计时秒数来进行配置。

2.在倒计时逻辑中，使用 setData 更新页面上显示的倒计时文本。

3.通过 formatTime 方法将秒数格式化为时分秒的字符串。

4.padZero 方法用于确保单个数字的时、分、秒都以两位数形式显示，例如将 "9" 格式化为 "09"。

以下是一个示例，演示了如何在微信小程序中使用class类实现倒计时：

1.在 Countdown 类中，添加一个新的构造函数参数，用于指定时间格式：

class Countdown {
  constructor(page, targetTime, format) {
    this.page = page;
    this.targetTime = new Date(targetTime).getTime(); // 将目标时间转换为时间戳
    this.timer = null;
    this.currentTime = null;
    this.format = format || 'd:h:m:s'; // 默认为"天:时:分:秒"格式
    this.formattedTime = this.formatTime(this.calculateRemainingMilliseconds());
  }

  // ...
  
  formatTime(milliseconds) {
    const days = Math.floor(milliseconds / (24 * 60 * 60 * 1000));
    const hours = Math.floor((milliseconds % (24 * 60 * 60 * 1000)) / (60 * 60 * 1000));
    const minutes = Math.floor((milliseconds % (60 * 60 * 1000)) / (60 * 1000));
    const seconds = Math.floor((milliseconds % (60 * 1000)) / 1000);

    const formattedDays = days > 0 ? `${days}天:` : '';
    const formattedHours = this.padZero(hours);
    const formattedMinutes = this.padZero(minutes);
    const formattedSeconds = this.padZero(seconds);

    let formattedTime = '';
    switch (this.format) {
      case 'd:h:m:s':
        formattedTime = `${formattedDays}${formattedHours}时:${formattedMinutes}分:${formattedSeconds}秒`;
        break;
      case 'h:m:s':
        formattedTime = `${formattedHours}时:${formattedMinutes}分:${formattedSeconds}秒`;
        break;
      default:
        formattedTime = `${formattedDays}${formattedHours}时:${formattedMinutes}分:${formattedSeconds}秒`;
    }

    return formattedTime;
  }

  // ...
}

2.在小程序的页面中，初始化 Countdown 实例时，传入所需的时间格式：

const Countdown = require('./Countdown.js'); // 路径根据实际情况修改

Page({
  data: {},

  onLoad: function () {
    // 初始化倒计时，传入目标时间和时间格式
    const targetTime1 = new Date().getTime() + 3600000; // 设置目标时间为当前时间加1小时，以毫秒为单位
    const targetTime2 = new Date().getTime() + 1800000; // 设置目标时间为当前时间加30分钟，以毫秒为单位
    this.countdown1 = new Countdown(this, targetTime1, 'd:h:m:s'); // "天:时:分:秒"格式
    this.countdown2 = new Countdown(this, targetTime2, 'h:m:s');    // "时:分:秒"格式
  },

  startCountdown1: function () {
    // 开始倒计时1
    this.countdown1.start();
  },

  startCountdown2: function () {
    // 开始倒计时2
    this.countdown2.start();
  },

  stopCountdown1: function () {
    // 停止倒计时1
    this.countdown1.stop();
  },

  stopCountdown2: function () {
    // 停止倒计时2
    this.countdown2.stop();
  },
});

3.在页面的 WXML 文件中直接使用各自的 formattedTime 属性来显示倒计时时间：

<view>
  <button bindtap="startCountdown1">开始倒计时1</button>
  <button bindtap="stopCountdown1">停止倒计时1</button>
  <text>{{ countdown1.formattedTime }}</text>
</view>

<view>
  <button bindtap="startCountdown2">开始倒计时2</button>
  <button bindtap="stopCountdown2">停止倒计时2</button>
  <text>{{ countdown2.formattedTime }}</text>
</view>

现在，你可以在小程序中同时支持多种时间格式，根据不同的需求传入不同的时间格式和目标时间来启动和显示倒计时。