Vue中用JSON实现刷新界面不影响倒计时


Posted in Javascript onOctober 26, 2020

本文实例为大家分享了Vue中用JSON实现刷新界面不影响倒计时的具体代码,供大家参考,具体内容如下

效果展示:

Vue中用JSON实现刷新界面不影响倒计时

部分代码

<el-form-item style="overflow:hidden" v-if="env === 'dev'">
 <el-input style="width:180px; float:left" v-model="ruleForm.nucCode" size="small" placeholder="请输入短信验证码" />
 <el-button class="message_btn" @click="getNumCode">
 <span v-if="isShowNucTime" style="font-size:16px" >{{Nuc_time}} S</span>
 <span v-else-if="!isShowNucTime && NucAgain" >重新获取验证码</span>
 <span v-else style="color:#7fbfff" >获取短信验证码</span>
 </el-button>
</el-form-item>
isShowNucTime:boolean = false;
NucAgain: boolean = false;
Nuc_code_freash: boolean = false; // 判断验证码是否过期
Nuc_time: number = 60;
end_time: number = 0;

private getCode() {
 let clicktime = new Date().getTime() + 60000;
 // 本地存储
 localStorage.setItem('myEndTime', JSON.stringify(clicktime));
 this.timeDown(clicktime);
 }

 // 验证码倒计时
 timeDown(counttime: any) {
 // 判断是否正在倒计时
 if (this.isShowNucTime) return;
 this.userChange = false;
 this.isShowNucTime = true;
 this.isGetNucCode = true;
 this.end_time = Number(localStorage.getItem('myEndTime'));
 this.Nuc_time = Math.ceil((this.end_time - new Date().getTime()) / 1000);
 let interval = setInterval(() => {
 this.Nuc_time--;
 if (this.Nuc_time < 1) {
 this.Nuc_time = 60;
 this.isShowNucTime = false;
 localStorage.removeItem('myEndTime');
 if (!this.userChange) {
 this.NucAgain = true;
 }
 clearInterval(interval);
 }
 }, 1000)
 }

private created(): void {
 let myEndTime= localStorage.getItem('myEndTime');
 myEndTime && this.timeDown(myEndTime);
 }

重要的代码部分

Vue中用JSON实现刷新界面不影响倒计时

Vue中用JSON实现刷新界面不影响倒计时

实现原理

1.首次加载页面 点击开始

1).获取当前时间戳与要倒计时的时间相加获得要停止计时的时间

2).用localStorage保存当前时间戳

3).通过js的setInterval定时器进行倒计时

4).当倒计时结束后 清除localStorage中保存的结束时间

2.当第n次进入页面或刷新页面时

1).首先判断localStorage中倒计时是否结束

2).没有结束则继续倒计时

3).如果结束则显示重新发送验证码

  • 主要运用了localStorage + new Date().getTime()
  • PS:本文只是展示部分代码,一味的复制粘贴并不能运行,还是搞清楚逻辑自己实现比较靠谱!

关于vue.js组件的教程,请大家点击专题vue.js组件学习教程进行学习。

更多vue学习教程请阅读专题《vue实战教程》

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
又一个图片自动缩小的JS代码
Mar 10 Javascript
jQuery创建插件的代码分析
Apr 14 Javascript
利用js动态添加删除table行的示例代码
Dec 16 Javascript
javascript调试过程中找不到哪里出错的可能原因
Dec 16 Javascript
JS实现单击输入框弹出选择框效果完整实例
Dec 14 Javascript
基于Javascript实现二级联动菜单效果
Mar 04 Javascript
微信小程序 navigation API实例详解
Oct 02 Javascript
JavaScript拖动层Div代码
Mar 01 Javascript
vue中如何引入jQuery和Bootstrap
Apr 10 jQuery
微信小程序实现图片上传、删除和预览功能的方法
Dec 18 Javascript
JavaScript学习笔记之数组基本操作示例
Jan 09 Javascript
javscript 数组扁平化的实现
Feb 03 Javascript
jQuery实现简单评论区功能
Oct 26 #jQuery
vue.js封装switch开关组件的操作
Oct 26 #Javascript
Node.js利用Express实现用户注册登陆功能(推荐)
Oct 26 #Javascript
vue render函数动态加载img的src路径操作
Oct 26 #Javascript
vue实现简单的登录弹出框
Oct 26 #Javascript
让你30分钟快速掌握vue3教程
Oct 26 #Javascript
在vue项目中 实现定义全局变量 全局函数操作
Oct 26 #Javascript
You might like
40年前的这部特摄片恐龙特级克塞号80后的共同回忆
2020/03/08 日漫
教你如何开启shopnc b2b2c 伪静态
2014/10/21 PHP
PHP递归创建多级目录
2015/11/05 PHP
用PHP的socket实现客户端到服务端的通信实例详解
2017/02/04 PHP
laravel validate 设置为中文的例子(验证提示为中文)
2019/09/29 PHP
javascript中对对层的控制
2006/12/29 Javascript
ext实现完整的登录代码
2008/08/08 Javascript
用cssText批量修改样式
2009/08/29 Javascript
详解JavaScript中getFullYear()方法的使用
2015/06/10 Javascript
基于jQuery实现拖拽图标到回收站并删除功能
2015/11/25 Javascript
基于jQuery实现仿搜狐辩论投票动画代码(附源码下载)
2016/02/18 Javascript
jQuery+ajax实现实用的点赞插件代码
2016/07/06 Javascript
JS取模、取商及取整运算方法示例
2016/10/13 Javascript
js使用Replace结合正则替换重复出现的字符串功能示例
2016/12/27 Javascript
jQuery实现滚动条滚动到子元素位置(方便定位)
2017/01/08 Javascript
Bootstrap实现渐变顶部固定自适应导航栏
2020/08/27 Javascript
React快速入门教程
2017/01/17 Javascript
vue+vux实现移动端文件上传样式
2017/07/28 Javascript
JavaScript实现HTML5游戏断线自动重连的方法
2017/09/18 Javascript
在vue-cli搭建的项目中增加后台mock接口的方法
2018/04/26 Javascript
jquery.pagination.js分页使用教程
2018/10/23 jQuery
JavaScript实现的弹出遮罩层特效经典示例【基于jQuery】
2019/07/10 jQuery
Python中的map()函数和reduce()函数的用法
2015/04/27 Python
Python对文件和目录进行操作的方法(file对象/os/os.path/shutil 模块)
2017/05/08 Python
python中的tcp示例详解
2018/12/09 Python
python文档字符串(函数使用说明)使用详解
2019/07/30 Python
pytorch之Resize()函数具体使用详解
2020/02/27 Python
Python模拟登入的N种方式(建议收藏)
2020/05/31 Python
HTML5 画布canvas使用方法
2016/03/18 HTML / CSS
JD Sports瑞典:英国领先的运动时尚商店
2018/01/28 全球购物
如何理解委托
2012/01/06 面试题
护理专业毕业生自我鉴定
2013/10/08 职场文书
工作建议书范文
2014/05/13 职场文书
2014年语文教学工作总结
2014/12/17 职场文书
新教师个人总结
2015/02/06 职场文书
我们的节日中秋节活动总结
2015/03/23 职场文书