实现60秒倒计时（刷新不重新计数）

àì夳堔傛蜴生んèń 2021-09-13 16:00 383阅读 0赞

## 完整代码： ##

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