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

创建插件

 

 

插件代码

• 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
  }