实现60秒倒计时(刷新不重新计数)

完整代码:

<template>
	<div ia="box">
		<p class="time">{{time}}</p>
	</div>
</template>
<script>
	export default{
		data() {
			return {
							 time: '',
						 }
		},
		created() {
			this.endTime();
		},
	 methods: {
		 //倒计时
		 endTime() {
			 let endingTime = new Date().getTime() + 1 * 60 * 1000;//可改变
			 let num = localStorage.getItem("endingTime");
			 if (localStorage.getItem("endingTime")) {
				 let diff = num - new Date().getTime();
				 if (diff <= 0) {
					 localStorage.removeItem('endingTime');
				 } else {
					 let m = Math.floor(diff / 1000 / 60);
					 let s = Math.floor(diff / 1000 - m * 60);
					 this.countDown(m, s);
					 let s2 = s < 10 ? ('0' + s) : s;
					 this.time = m + '分' + s2 + '秒';
				 }
			 } else {
				 this.countDown(1, 0);//可改变
				 this.time = 60 + '秒';//可改变
				 localStorage.setItem("endingTime", endingTime)
			 }
		 },
		 //倒计时
		 countDown(munite, second) {
			 let m = munite;
			 let s = second;
			 let m2, s2;
			 let _this = this;
			 let tiem = setInterval(function () {
				 s--;
				 if (s < 0) {
					 s = 60;
					 m--;
					 if (m < 0) {
						 localStorage.removeItem('endingTime');
						 _this.time = '00分00秒';
						 clearTimeout(tiem);
						 return;
					 }
				 }
				 m2 = m < 10 ? '0' + m : m;
				 s2 = s < 10 ? ('0' + s) : s;
				 _this.time = m2 + '分' + s2 + '秒';
			 }, 1000)
		 },
		},
	}
</script>
<style>
</style>

你可能感兴趣的:(实现60秒倒计时(刷新不重新计数))