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代码
Aug 27 Javascript
javascript 对象数组根据对象object key的值排序
Mar 09 Javascript
BootStrap Validator对于隐藏域验证和程序赋值即时验证的问题浅析
Dec 01 Javascript
JavaScript Canvas绘制圆形时钟效果
Aug 20 Javascript
seajs实现强制刷新本地缓存的方法分析
Oct 16 Javascript
jQuery实现checkbox即点即改批量删除及中间遇到的坑
Nov 11 jQuery
详解vue-cli项目中怎么使用mock数据
May 29 Javascript
vue实现学生录入系统之添加删除功能
Jul 11 Javascript
Vue2.0学习系列之项目上线的方法步骤(图文)
Sep 25 Javascript
JavaScript中的函数申明、函数表达式、箭头函数
Dec 06 Javascript
通过实例解析JavaScript for in及for of区别
Jun 15 Javascript
如何实现echarts markline标签名显示自己想要的
Jul 20 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
ubuntu下编译安装xcache for php5.3 的具体操作步骤
2013/06/18 PHP
安装ImageMagick出现error while loading shared libraries的解决方法
2014/09/23 PHP
php curl 上传文件代码实例
2015/04/27 PHP
php将图片文件转换成二进制输出的方法
2015/06/10 PHP
Yii2处理密码加密及验证的方法
2019/05/12 PHP
PHP中关于php.ini参数优化详解
2020/02/28 PHP
js 调整select 位置的函数
2008/02/21 Javascript
Javascript 兼容firefox的一些问题
2009/05/21 Javascript
ExtJS 设置级联菜单的默认值
2010/06/13 Javascript
jquery 读取页面load get post ajax 四种方式代码写法
2011/04/02 Javascript
jQuery页面滚动浮动层智能定位实例代码
2011/08/23 Javascript
Javascript验证用户输入URL地址是否为空及格式是否正确
2014/10/09 Javascript
js选项卡的实现方法
2015/02/09 Javascript
JavaScript中Function()函数的使用教程
2015/06/04 Javascript
jquery实现从数组移除指定的值
2015/06/24 Javascript
基于javascript实现彩票随机数生成(升级版)
2020/04/17 Javascript
Jquery easyui开启行编辑模式增删改操作
2016/01/14 Javascript
vue.extend实现alert模态框弹窗组件
2018/04/28 Javascript
详解vue服务端渲染浏览器端缓存(keep-alive)
2018/10/12 Javascript
微信小程序事件对象中e.target和e.currentTarget的区别详解
2019/05/08 Javascript
原生js生成图片验证码
2020/10/11 Javascript
让Vue响应Map或Set的变化操作
2020/11/11 Javascript
[01:45]DOTA2众星出演!DSPL刀塔次级职业联赛宣传片
2014/11/21 DOTA
python3下使用cv2.imwrite存储带有中文路径图片的方法
2018/05/10 Python
Python实现的列表排序、反转操作示例
2019/03/13 Python
Python 3 实现定义跨模块的全局变量和使用教程
2019/07/07 Python
windows python3安装Jupyter Notebooks教程
2020/04/13 Python
详解python的super()的作用和原理
2020/10/29 Python
W3C公布最新的HTML5标准草案
2008/10/17 HTML / CSS
如何利用find命令查找文件
2015/02/07 面试题
创建卫生先进单位实施方案
2014/03/10 职场文书
网上祭先烈心得体会
2014/09/01 职场文书
Python入门之基础语法详解
2021/05/11 Python
python 对图片进行简单的处理
2021/06/23 Python
利用Python实时获取steam特惠游戏数据
2022/06/25 Python
什么是clearfix (一文搞清楚css清除浮动clearfix)
2023/05/21 HTML / CSS