vue组件把秒转换成时分秒倒计时

使用组件

<countdown :surplusTime="秒"></countdown>

创建组件countdown

<template>
	<span>{{ jishi }}</span>
</template>

<script>
let timer = null;
export default {
	props: {
		surplusTime: {
			type: Number,
			default: 0
		}
	},
	data() {
		return {
			jishi: ''
		};
	},
	mounted() {
		if (this.surplusTime > 0) {
			let count = this.surplusTime;
			timer = setInterval(() => {
				if (count == 0) {
					clearInterval(timer);
					return false;
				}
				count -= 1;
				this.countdown(count);
			}, 1000);
		}
	},
	methods: {
		countdown(result) {
			var h = Math.floor(result / 3600) < 10 ? '0' + Math.floor(result / 3600) : Math.floor(result / 3600);
			var m = Math.floor((result / 60) % 60) < 10 ? '0' + Math.floor((result / 60) % 60) : Math.floor((result / 60) % 60);
			var s = Math.floor(result % 60) < 10 ? '0' + Math.floor(result % 60) : Math.floor(result % 60);
			if (h == 0) {
				result = m + ':' + s;
			} else {
				result = h + ':' + m + ':' + s;
			}
			this.jishi = result;
		}
	},
	destroyed() {}
};
</script>

<style lang="scss" scoped="scoped"></style>

<template>
	<text style="color: #FF4C3C;">{{ countdownVal }}</text>
</template>

<script>
export default {
	props: {
		count: 0
	},
	data() {
		return {
			countdownVal: 0
		};
	},

	mounted() {
		this.setIntervalFun(this.count);
	},
	methods: {
		/**计时器**/
		setIntervalFun(count) {
			let clockCount = null;
			clearInterval(clockCount);
			clockCount = setInterval(() => {
				if (count < 1) {
					clearInterval(clockCount);
					console.log('[计时结束-001]');
				} else {
					count--;
					countdown(count);
				}
			}, 1000);
			let countdown = result => {
				var h = Math.floor(result / 3600) < 10 ? '0' + Math.floor(result / 3600) : Math.floor(result / 3600);
				var m = Math.floor((result / 60) % 60) < 10 ? '0' + Math.floor((result / 60) % 60) : Math.floor((result / 60) % 60);
				var s = Math.floor(result % 60) < 10 ? '0' + Math.floor(result % 60) : Math.floor(result % 60);
				if (h == 0) {
					result = m + ':' + s;
				} else {
					result = h + ':' + m + ':' + s;
				}
				this.countdownVal = result;
			};
		}
	}
};
</script>

<style lang="scss" scoped></style>