微信小程序倒计时组件

微信小程序倒计时组件,比较简单,记录一波,欢迎讨论。
配置和样式文件就不放了,里面也没写啥,样式的话直接给组件添加class就行了

参数描述默认值
isTimeStamp是否是时间戳false
endTime倒计时结束时间默认值为60 * 1000毫秒(时间戳模式下传入结束时间戳)
format倒计时时间格式{DD}:{HH}:{mm}:{ss}
endText倒计时结束语已结束
countEnd倒计时结束函数结束时触发
currentFn倒计时开始后每隔一秒执行一次
start开始函数可通过父组件调用(调用方法this.selectComponent("#top-countdown").start();)项目中用到了临时加了个,可以不用管(也可自行扩展)

使用
<count-down id="top-countdown" class="top-countdown" format="{S}" end-time="{{endTime}}" end-text="0" bind:countEnd="timeEnds"></count-down>

count-down.wxml

<view>{{result}}</view>

count-down.js

/**
 * 自定义倒计时
 * endTime 结束的时间 默认单位为ms
 * format dd-hh-mm-ss 时间格式
 * endText  结束提示语
 * countEnd 倒计时结束函数
 */

let timer = null,
	intval = 1000;

Component({
	properties: {
		// 是否为时间戳模式
		isTimeStamp: {
			type: Boolean,
			defalute: false
		},
		// 倒计时结束时间
		endTime: {
			type: Number,
			value: 60 * 1000
		},
		// 倒计时格式
		format: {
			type: String,
			value: "{DD}:{HH}:{mm}:{ss}"
		},
		// 结束提示
		endText: {
			type: String,
			value: "已结束"
		},
		//当前时间
		currentTime: {
			type: Number,
			value: new Date().getTime()
		}
	},
	// 样式
	options:{
		addGlobalClass:true,
	},

	data: {
		result: "", //显示结果
	},

	lifetimes: {
		ready(){
			this.init();
		},
		detached() {
			//组件销毁时清除定时器 防止爆栈
			clearTimeout(timer);
		},
	},

	methods: {
		start(){
			this.init();
		},
		// 时间格式处理
		format(formatStr, time) {
			// 使用正则体换格式
			formatStr = formatStr.replace(/{DD}/, this.formatNumber(time.d)).
			replace(/{HH}/, this.formatNumber(time.h)).
			replace(/{mm}/, this.formatNumber(time.m)).
			replace(/{ss}/, this.formatNumber(time.s)).
			replace(/{D}/, time.d).
			replace(/{H}/, time.h).
			replace(/{m}/, time.m).
			replace(/{s}/, time.s).
			replace(/{S}/, time.S)
			return formatStr;
		},
		defaultFormat(time) {
			let daydiff = 24 * 60 * 60 * 1000;
			let hoursdiff = 60 * 60 * 1000;
			let minutesdiff = 60 * 1000;

			let d = Math.floor(time / daydiff); //天数
			let h = Math.floor((time - d * daydiff) / hoursdiff);
			let m = Math.floor((time - d * daydiff - h * hoursdiff) / minutesdiff);
			let s = Math.floor((time - d * daydiff - h * hoursdiff - m * minutesdiff) / 1000);

			let S = time / 1000;

			return {
				d,
				h,
				m,
				s,
				S
			}
		},
		//定时启动
		init() {
			timer = setTimeout(() => {
				if (this.data.endTime < intval) {
					console.log(123)
					this.setData({
						result: this.data.endText
					})
					clearTimeout(timer);
					this.countEnd && this.countEnd()
					return false;
				}
				let time = this.timeStamp();
				let formTime = this.defaultFormat(time)
				let res = this.format(this.data.format, formTime);
				this.setData({
					result: res
				})
				this.currentFn && this.currentFn(this.data.endTime)
				this.data.endTime -= intval;
				this.init();
			}, intval)
		},
		// 时间戳处理
		timeStamp() {
			if (this.data.isTimeStamp) {
				let endTime = this.data.endTime - this.data.currentTime;
				return endTime;
			}
			return this.data.endTime;
		},
		// 倒计时结束处理函数
		countEnd() {
			this.triggerEvent("countEnd")
		},
		// 倒计时进行时函数
		currentFn(time){
			this.triggerEvent("currentFn",time)
		},
		// 补零操作
		formatNumber(n) {
			n = n.toString()
			return n[1] ? n : `0${n}`
		}
	}

})
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值