详解微信小程序用定时器实现倒计时效果

下面是详解微信小程序用定时器实现倒计时效果的完整攻略。

步骤一：引入moment.js库

我们需要使用moment.js库来处理日期和时间。在小程序的App.js文件中引入moment.js库，代码如下：

// 引入moment.js库
const moment = require('./libs/moment.min.js');

// 将moment.js注册到全局变量
App({
  globalData: {
    moment: moment
  }
});

步骤二：获取倒计时时间

在Page的onLoad生命周期函数中，我们可以获取倒计时结束时间，代码如下：

onLoad: function () {
  // 倒计时结束时间
  const end_time = '2021-12-31 23:59:59';

  // 将倒计时结束时间转为时间戳
  const end_timestamp = this.getTimestamp(end_time);
}

其中，getTimestamp函数用来将日期字符串转为时间戳：

// 将日期字符串转为时间戳
getTimestamp: function (datetime) {
  const moment = getApp().globalData.moment;
  return moment(datetime).valueOf() / 1000;
}

步骤三：更新倒计时时间

我们可以在Page的onShow生命周期函数中使用定时器来更新倒计时时间，代码如下：

onShow: function () {
  // 更新倒计时时间
  this.updateCountdown();
},

// 更新倒计时时间
updateCountdown: function () {
  const end_time = '2021-12-31 23:59:59';
  const end_timestamp = this.getTimestamp(end_time);

  this.countdown_timer = setInterval(() => {
    const current_timestamp = Math.floor(new Date().getTime() / 1000);
    const diff_timestamp = end_timestamp - current_timestamp;
    const countdown = this.formatCountdown(diff_timestamp);

    this.setData({
      countdown: countdown
    });

    if (diff_timestamp <= 0) {
      clearInterval(this.countdown_timer);
    }
  }, 1000);
}

其中，formatCountdown函数用来格式化倒计时时间：

// 格式化倒计时时间
formatCountdown: function (diff_timestamp) {
  const moment = getApp().globalData.moment;

  const days = Math.floor(diff_timestamp / 86400);
  const hours = Math.floor((diff_timestamp % 86400) / 3600);
  const minutes = Math.floor((diff_timestamp % 3600) / 60);
  const seconds = diff_timestamp % 60;

  return moment.utc().hour(hours).minute(minutes).second(seconds).format('HH:mm:ss');
}

示例说明一：一个简单的倒计时效果

下面是一个简单的倒计时效果的示例代码，代码中的倒计时时间为10秒：

// 倒计时时间
const countdown_time = 10;

// 更新倒计时时间
this.updateCountdown();

// 更新倒计时时间
updateCountdown: function () {
  let countdown = countdown_time;

  this.countdown_timer = setInterval(() => {
    countdown--;

    this.setData({
      countdown: countdown
    });

    if (countdown <= 0) {
      clearInterval(this.countdown_timer);
    }
  }, 1000);
}

示例说明二：一个带有时分秒的倒计时效果

下面是一个带有时分秒格式的倒计时效果的示例代码，代码中的倒计时时间为3天10小时20分30秒：

// 倒计时结束时间
const end_time = '2021-12-31 23:59:59';

// 更新倒计时时间
this.updateCountdown();

// 更新倒计时时间
updateCountdown: function () {
  const end_timestamp = this.getTimestamp(end_time);

  this.countdown_timer = setInterval(() => {
    const current_timestamp = Math.floor(new Date().getTime() / 1000);
    const diff_timestamp = end_timestamp - current_timestamp;
    const countdown = this.formatCountdown(diff_timestamp);

    this.setData({
      countdown: countdown
    });

    if (diff_timestamp <= 0) {
      clearInterval(this.countdown_timer);
    }
  }, 1000);
}

整体的代码可以参考如下链接：

微信小程序倒计时示例代码