【微信小程序】原生小程序,实现简单的倒计时插件

时间:2024-03-10 09:55:14

创建插件

 

 

插件代码

  • count-down.wxml
<view class="count-down">
  <text class="days" wx:if="{{showDays}}">{{days}}</text>
  <text class="spot" wx:if="{{showDays}}">{{spot.days}}</text>
  
  <text class="hours" wx:if="{{showHours}}">{{hours}}</text>
  <text class="spot" wx:if="{{showHours}}">{{spot.hours}}</text>
  
  <text class="minutes" wx:if="{{showMinute}}">{{minutes}}</text>
  <text class="spot" wx:if="{{showMinute}}">{{spot.minutes}}</text>
  
  <text class="seconds">{{seconds}}</text>
  <text class="spot">{{spot.seconds}}</text>
</view>

  > 显示的格式:xx天xx时xx分xx秒,或者 00:00:00:00,更多格式根据需求配置

      > 根据需求配置精确度:天、时、分、秒

 

  • count-down.js
Component({
	data: {
		timers: false, 	// 定时器
		days: \'00\', 	// 天
		hours: \'00\', 	// 时
		minutes: \'00\', 	// 分
		seconds: \'00\', 	// 秒
		spotList: {		// 倒计时格式,按需配置
			1: {
				\'days\': \':\',
				\'hours\': \':\',
				\'minutes\': \':\',
				\'seconds\': \'\',
			},
			2: {
				\'days\': \'天\',
				\'hours\': \'时\',
				\'minutes\': \'分\',
				\'seconds\': \'秒\'
			}
		},
	},
	properties: {
		eTime: {
			type: Number,
			value: 0
		},
		spotType: {
			type: Number,
			value: 1
		},
		showMinute: {
			type: Number,
			value: 1
		},
		showHours: {
			type: Number,
			value: 1
		},
		showDays: {
			type: Number,
			value: 1
		},
	},
	observers: {
	},
	lifetimes: {
		attached() {
			this.clockInit();
		},
		datached() {
			clearInterval(this.data.timers);
		}
	},
	methods: {
		// 初始化
		clockInit() {
			var spotList = this.data.spotList,
				spotType = this.data.spotType;
			this.setData({
				spot: spotList[spotType],
				showDays: this.data.showDays,
				showHours: this.data.showHours,
				showMinute: this.data.showMinute
			});

			var secondTime = this.data.eTime;		
			this.data.timers = setInterval(() => {
				if (secondTime <= 0) {
					return this.endOfTime()
				}
				
				secondTime--;				
				this.countDown(secondTime);
			}, 1000);
			
		},
		// 倒计时结束
		endOfTime() {
			clearInterval(this.data.timers);
			this.triggerEvent(\'endOfTime\', 1);
		},
		// 计算时分秒
		countDown(secondTime) {			
			var seconds = secondTime,
			    minutes = 0,
				hours   = 0,
				days    = 0;
			if (this.data.showMinute) {
				minutes = Math.floor(seconds / 60);
				seconds = seconds % 60;
			}
			
			if (this.data.showHours) {
				hours = Math.floor(minutes / 60);
				minutes = minutes % 60;
			}
			
			if (this.data.showDays) {
				days = Math.floor(hours / 24);
				hours = hours % 24;
			}
			
			this.setData({
				days: this.zeroFill(days),
				hours: this.zeroFill(hours),
				minutes: this.zeroFill(minutes),
				seconds: this.zeroFill(seconds)
			});
		},
		// 补零
		zeroFill(n, type) {
			if(type == \'s\') {
			  return parseInt(n) < 10 && parseInt(n) >= 0 ? "0" + parseInt(n) : parseInt(n)
			}else {
			  return parseInt(n) < 10 && parseInt(n) >= 0 ? "0" + n : n
			}
		}
	}
})

  

插件使用

  • wxml:初始化倒计时秒数、显示格式、倒计时结束触发事件
<count-down eTime="{{order.count_down}}" bind:endOfTime="endOfTime" showDays="false" showHours="false" wx:if="{{order.count_down > 0}}"/>
  • js
endOfTime: function (e) {
	console.log(\'endOf
  }