微信小程序-倒计时组件

在微信小程序中，可以使用、和等基本组件结合setInterval函数来实现倒计时功能。以下是一个简单的倒计时组件的代码示例：

WXML文件（*.wxml）

WXSS文件（*.wxss）

.countdown {
  text-align: center;
  margin-top: 20rpx;
}

.countdown-text {
  font-size: 36rpx;
  color: #333;
}

.countdown-btn {
  margin-top: 20rpx;
  background-color: #42c02e;
  color: #fff;
  border: none;
  padding: 15rpx 30rpx;
  border-radius: 10rpx;
}

JS文件（*.js）

Page({
  data: {
    hours: '00',
    minutes: '00',
    seconds: '00',
    timer: null
  },

  startCountdown: function() {
    let totalSeconds = 3600;  // 设置总秒数，此处为1小时
    this.setData({
      hours: this.formatTime(Math.floor(totalSeconds / 3600)),
      minutes: this.formatTime(Math.floor(totalSeconds / 60 % 60)),
      seconds: this.formatTime(Math.floor(totalSeconds % 60))
    });

    // 开始倒计时
    this.data.timer = setInterval(() => {
      totalSeconds--;
      this.setData({
        hours: this.formatTime(Math.floor(totalSeconds / 3600)),
        minutes: this.formatTime(Math.floor(totalSeconds / 60 % 60)),
        seconds: this.formatTime(Math.floor(totalSeconds % 60))
      });

      if (totalSeconds <= 0) {
        clearInterval(this.data.timer);
      }
    }, 1000);
  },

  formatTime: function(time) {
    return time < 10 ? '0' + time : '' + time;
  }
})

在这个示例中，我们创建了一个简单的倒计时组件，当点击“开始倒计时”按钮时，将会启动倒计时，并且显示剩余的小时、分钟和秒数。当倒计时结束后，定时器将被清除。这段代码可以作为一个简单的倒计时功能的起点，你也可以根据自己的需求对其进行定制和扩展。

上一篇：微信小程序父组件调用子组件事件和传递参数

下一篇：uniapp怎么动态设置页面顶部的标题