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遍历 table的脚本
Jul 23 Javascript
简单实用的js调试logger组件实现代码
Nov 20 Javascript
分享Javascript中最常用的55个经典小技巧
Nov 29 Javascript
JS调用页面表格导出excel示例代码
Mar 18 Javascript
jquery实现个人中心导航菜单效果和美观都非常不错
Sep 02 Javascript
javascript实现微信分享
Dec 23 Javascript
jquery实现从数组移除指定的值
Jun 24 Javascript
javascript中FOREACH数组方法使用示例
Mar 01 Javascript
jQuery点击弹出层弹出模态框点击模态框消失代码分享
Jan 21 Javascript
Javascript 详解封装from表单数据为json串进行ajax提交
Mar 29 Javascript
深入浅析vue-cli@3.0 使用及配置说明
May 08 Javascript
vue使用localStorage保存登录信息 适用于移动端、PC端
May 27 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
打造计数器DIY三步曲(上)
2006/10/09 PHP
Ajax+PHP 边学边练 之二 实例
2009/11/24 PHP
解析php DOMElement 操作xml 文档的实现代码
2013/05/10 PHP
PHP运行SVN命令显示某用户的文件更新记录的代码
2014/01/03 PHP
C#静态方法与非静态方法实例分析
2014/09/22 PHP
php数据访问之查询关键字
2016/05/09 PHP
Z-Blog中用到的js代码
2007/03/15 Javascript
实现局部遮罩与关闭原理及代码
2013/02/04 Javascript
javascript自适应宽度的瀑布流实现思路
2013/02/20 Javascript
node.js超时timeout详解
2014/11/26 Javascript
基于Css3和JQuery实现打字机效果
2015/08/11 Javascript
js实现YouKu的漂亮搜索框效果
2015/08/19 Javascript
js添加绑定事件的方法
2016/05/15 Javascript
vue中v-model动态生成的实例详解
2017/10/27 Javascript
JavaScript实现为事件句柄绑定监听函数的方法分析
2017/11/14 Javascript
JS实现生成由字母与数字组合的随机字符串功能详解
2018/05/25 Javascript
vue移动端轻量级的轮播组件实现代码
2018/07/12 Javascript
利用js-cookie实现前端设置缓存数据定时失效
2019/06/18 Javascript
Vue列表循环从指定下标开始的多种解决方案
2020/04/08 Javascript
vue 如何使用递归组件
2020/10/23 Javascript
jQuery冲突问题解决方法
2021/01/19 jQuery
Linux中Python 环境软件包安装步骤
2016/03/31 Python
浅谈Python类的__getitem__和__setitem__特殊方法
2016/12/25 Python
python 在指定范围内随机生成不重复的n个数实例
2019/01/28 Python
详解python读取image
2019/04/03 Python
详解python statistics模块及函数用法
2019/10/27 Python
Python类如何定义私有变量
2020/02/03 Python
解决tensorflow添加ptb库的问题
2020/02/10 Python
pycharm配置python 设置pip安装源为豆瓣源
2021/02/05 Python
通过css3动画和opacity透明度实现呼吸灯效果
2019/08/09 HTML / CSS
十岁生日同学答谢词
2014/01/19 职场文书
财务信息服务专业自荐书范文
2014/02/08 职场文书
社会学专业求职信
2014/02/24 职场文书
2015年小学二年级班主任工作总结
2015/05/21 职场文书
MySQL性能压力基准测试工具sysbench的使用简介
2021/04/21 MySQL
利用Apache Common将java对象池化的问题
2022/06/16 Servers