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 相关文章推荐
JavaScript constructor和instanceof,JSOO中的一对欢喜冤家
May 25 Javascript
JavaScript 动态添加表格行 使用模板、标记
Oct 24 Javascript
javascript中运用闭包和自执行函数解决大量的全局变量问题
Dec 30 Javascript
js定时器怎么写?就是在特定时间执行某段程序
Oct 11 Javascript
JavaScript实现的使用键盘控制人物走动实例
Aug 27 Javascript
javascript如何写热点图
Dec 08 Javascript
js完整倒计时代码分享
Sep 18 Javascript
使用jquery给指定的table动态添加一行、删除一行
Oct 13 Javascript
JavaScript使用正则表达式获取全部分组内容的方法示例
Jan 17 Javascript
10分钟上手vue-cli 3.0 入门介绍
Apr 04 Javascript
详解关于Vue版本不匹配问题(Vue packages version mismatch)
Sep 17 Javascript
JavaScript实现选项卡效果的分析及步骤
Apr 16 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
操作Oracle的php类
2006/10/09 PHP
php获取本地图片文件并生成xml文件输出具体思路
2013/04/27 PHP
解析htaccess伪静态的规则
2013/06/18 PHP
PHP正则表达式 /i, /is, /s, /isU等介绍
2014/10/23 PHP
PHP判断一个字符串是否是回文字符串的方法
2015/03/23 PHP
利用PHP生成静态html页面的原理
2016/09/30 PHP
php实现大文件断点续传下载实例代码
2019/10/01 PHP
jquery控制左右箭头滚动图片列表的实例
2013/05/20 Javascript
jquery对dom的操作常用方法整理
2013/06/25 Javascript
为jQuery添加Webkit的触摸的方法分享
2014/02/02 Javascript
JS实现按比例缩放图片的方法(附C#版代码)
2015/12/08 Javascript
JS生成不重复的随机数组的简单实例
2016/07/10 Javascript
webpack独立打包和缓存处理详解
2017/04/03 Javascript
JavaScript实现简单生成随机颜色的方法
2017/09/21 Javascript
微信小程序实现自定义modal弹窗封装的方法
2018/06/15 Javascript
JS+HTML5 canvas绘制验证码示例
2018/12/05 Javascript
Node.js之readline模块的使用详解
2019/03/25 Javascript
Vue+elementui 实现复杂表头和动态增加列的二维表格功能
2019/09/23 Javascript
vue引用外部JS的两种种方法
2020/01/28 Javascript
40行代码把Vue3的响应式集成进React做状态管理
2020/05/20 Javascript
Webpack的Loader和Plugin的区别
2020/11/09 Javascript
详细讲解用Python发送SMTP邮件的教程
2015/04/29 Python
老生常谈Python之装饰器、迭代器和生成器
2017/07/26 Python
pandas 实现将重复表格去重,并重新转换为表格的方法
2018/04/18 Python
Python函数中参数是传递值还是引用详解
2019/07/02 Python
Flask教程之重定向与错误处理实例分析
2019/08/01 Python
python实现一次性封装多条sql语句(begin end)
2020/06/06 Python
keras使用Sequence类调用大规模数据集进行训练的实现
2020/06/22 Python
pytorch下的unsqueeze和squeeze的用法说明
2021/02/06 Python
美国畅销的跑步机品牌:ProForm
2017/02/06 全球购物
音乐教学案例
2014/01/30 职场文书
化学系大学生自荐信范文
2014/03/01 职场文书
工厂门卫岗位职责范本
2014/04/04 职场文书
工作粗心大意检讨书
2014/09/18 职场文书
单位介绍信格式
2015/01/31 职场文书
酒店优秀员工推荐信
2015/03/24 职场文书