VUE倒计时刷新页面不影响

前端 强制性JS倒计时关闭浏览器(刷新页面也存在)也会存在的倒计时*

VUE 倒计时刷新页面也存在 (持续更新)

不多BB 直接上代码
活用 localStorage 机制
(VUE+webpack版)

注意

目前的代码是关闭浏览器会记录你关闭时的秒数,并且下次来到这个页面时,会在上次的时间进行倒计时 代码有缺陷 (懒)

如果只是想页面刷新时倒计时不重置只需要把下面的 localStorage 换成 sessionStorage 即可

**


##

<script>
 export default {
        data(){
            return{
             inters:null,//定时器
             coutrdown:60//倒计时时间
            }
		 },
			
	methods:{
	
		toLoading(){ //短信验证码发送
  			let self=this
   			self.inter = setInterval(self.fusn, 1000);
		}, 
		fusn(){
   			 let self=this
    		 self.coutrdown--;
    		 console.log(self.coutrdown)
    		 window.localStorage.setItem("X_no_time",self.coutrdown);//存入本地
    		 if(window.localStorage.getItem("X_no_time")<="0"){//等于0时清空
        		window.localStorage.removeItem('X_no_time');
    		}
    		 if(coutrdown <= 0) {//小于或者等于0时
       			  self.coutrdown=60;//重新赋值为60秒,如果用户在倒计时期间关闭了浏览器下次打开也面会调用created()方法
         		  clearInterval(self.inter)
   			 }
   			 
   			 
		 }//fusn

		},//methods


		created(){//实例化完成后
      	  let self=this;
       	 if(window.localStorage.getItem("X_no_time")==null){
            	console.log("第一次或者又过来一次");
        }else{
            self.coutrdown=Number(window.localStorage.getItem("X_no_time"));
            self.toLoading()
        }

       }

        }//export default

	</script>
  • 3
    点赞
  • 13
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值