当前位置: 首页 > news >正文

发送验证码倒计时 防刷新重置!!!

需求:发送验证码,每60s可点击发送一次,倒计时中按钮不可点击,且刷新页面倒计时不会重置

可用以下方式避免刷新页面时,倒计时重置

localStorage本地缓存方式

思路:
1.记录倒计时的时间
2.页面加载时(刷新页面时)先获取存储的时间
3.判断存储的时间,
不存在则正常初始化;
大于1则将存储的时间数字赋值给时间变量继续执行倒计时;
小于1则正常初始化

<button @click="getCode">{{timeText}}</span>data(){return {timeText: '获取验证码',canSend: true,  //是否可发送验证码time: 60,		}
}methods: {getCode(){this.handleCountDownTime()},//处理倒计时 和 按钮点击状态handleCountDownTime(){let timer = setInterval(() => {if (this.time > 1 && this.time <= 60) {this.time = this.time - 1this.canSend = falsethis.timeText = `${this.time} s后获取`//每次刷新纪录一次 倒计时的时间localStorage.setItem('countDownTime',new Date().getTime())} else {this.time = 60this.canSend = truethis.timeText = `获取验证码`clearInterval(timer)localStorage.removeItem('countDownTime'}}, 1000)}
},created(){let countDownTime = localStorage.getItem('countDownTime')if(countDownTime && countDownTime > 1){this.time = countDownTime  //剩下的需要计时的秒数this.handleCountDownTime()}
}

注意:记得在登陆成功或者进行后续操作后把缓存清掉

相关文章:

发送验证码倒计时 防刷新重置!!!

需求&#xff1a;发送验证码&#xff0c;每60s可点击发送一次&#xff0c;倒计时中按钮不可点击&#xff0c;且刷新页面倒计时不会重置 可用以下方式避免刷新页面时&#xff0c;倒计时重置 localStorage本地缓存方式 思路&#xff1a; 1.记录倒计时的时间 2.页面加载时&…...

OpenCV项目开发实战--forEach的并行像素访问与其它方法的性能比较

在本教程中,我们将比较Mat 类的forEach方法与 OpenCV 中访问和转换像素值的其他方法的性能。我们将展示forEach如何比简单地使用at方法甚至有效地使用指针算术快得多。 OpenCV 内部有一些隐藏的宝石,有时并不为人所知。这些隐藏的宝石之一是Mat 类的forEach方法,它利用计算…...

cv::Mat 的常见操作方法

cv::Mat是OpenCV库中用于处理图像和矩阵的主要数据结构。以下是一些常见的cv::Mat操作方法&#xff1a; 创建和初始化 cv::Mat::Mat(): 创建一个空的cv::Mat对象。cv::Mat::Mat(int rows, int cols, int type): 创建一个指定行数、列数和数据类型的cv::Mat对象。cv::Mat::Mat(i…...

JVM——11.JVM小结

这篇文章我们来小结一下JVM JVM&#xff0c;即java虚拟机&#xff0c;是java代码运行时的环境。我们从底层往上层来说&#xff0c;分别是硬件部分&#xff0c;操作系统&#xff0c;JVM&#xff0c;jre&#xff0c;JDK&#xff0c;java代码。JVM是直接与操作系统打交道的。JVM也…...

月木学途开发 2.前台用户模块

概述 效果展 数据库设计 会员表 DROP TABLE IF EXISTS user_type; CREATE TABLE user_type (userTypeId int(11) NOT NULL AUTO_INCREMENT,userTypeName varchar(255) DEFAULT NULL,userTypeDesc varchar(255) DEFAULT NULL,PRIMARY KEY (userTypeId) ) ENGINEInnoDB AUTO_I…...

buuctf-ciscn_s_3

一、srop 参考文章-博客园-wudiiv11&#xff08;作者&#xff09;-BUUCTF-ciscn_2019_s_3 参考文章-博客园-z2yh&#xff08;作者&#xff09;-Srop 原理与利用方法 vlun函数中没有分配栈帧&#xff08;指rsp没有增长&#xff0c;也没有压入父函数的rbp&#xff0c;这也导致…...

3D模型格式转换工具HOOPS Exchange协助Epic Games实现CAD数据轻松导入虚幻引擎

一、面临的挑战 Epic Games最为人所知的身份可能是广受欢迎的在线视频游戏Fortnite的开发商&#xff0c;但它也是虚幻引擎背后的团队&#xff0c;虚幻引擎是一种实时3D创作工具&#xff0c;为世界领先的游戏提供动力&#xff0c;并且也被电影电视、建筑、汽车、制造、模拟等领…...

Linux- inode vnode

什么是inode inode 是 UNIX 和 UNIX-like 操作系统中的一个关键概念。它代表了文件系统中文件或目录的元数据。每个文件和目录在文件系统中都有一个与之关联的 inode。这个数据结构存储了关于文件的所有信息&#xff0c;除了其名称和实际数据之外。 以下是 inode 中通常包含的…...

不来看看?通过Python实现贪吃蛇小游戏

&#x1f3c5;我是默&#xff0c;一个在CSDN分享笔记的博主。&#x1f4da;&#x1f4da; &#x1f31f;在这里&#xff0c;我要推荐给大家我的专栏《Python》。&#x1f3af;&#x1f3af; &#x1f680;无论你是编程小白&#xff0c;还是有一定基础的程序员&#xff0c;这个专…...

C# linq初探 使用linq查询数组中元素

使用linq进行数组查询 输出数组中全部的偶数并升序输出结果 写法1&#xff1a; int[] numbers { 5, 10, 8, 3, 6, 12 }; //查询的数组var numqurey from num in numberswhere num % 2 0 //按照条件过滤orderby numselect num;foreach (var num in numqurey){Console.Writ…...

使用线程池进行任务处理

线程池 线程池&#xff1a;一种线程使用模式。线程过多会带来调度开销&#xff0c;进而影响缓存局部性和整体性能。而线程池维护着多个线程&#xff0c;等待着监督管理者分配可并发执行的任务。这避免了在处理短时间任务时创建与销毁线程的代价。线程池不仅能够保证内核的充分…...

ES6之Map和Set有什么不同?

一、Map 1.定义 Map是ES6提供的一种新的数据结构&#xff0c;它是键值对的集合&#xff0c;类似于对象&#xff0c;但是键的范围不限于字符串&#xff0c;各种类型的值都可以当做键。 Object结构是“字符串-值”的对应&#xff0c;Map结构则是“值-值”的对应 2.代码示例 M…...

Java中的集合

Java中的集合分为单列集合和双列集合&#xff0c;单列集合顶级接口为Collection&#xff0c;双列集合顶级接口为Map。 Collection 的子接口有两个&#xff1a;List和Set。 List 接口的特点&#xff1a;元素可重复&#xff0c;有序&#xff08;存取顺序&#xff09;。 List 接…...

9.4.2servlet基础2

一.SmartTomcat 1.第一次使用需要进行配置. 二.异常处理 1.404:浏览器访问的资源,在服务器上不存在. a.检查请求的路径和服务器配置的是否一致(大小写,空格,标点符号). b. 确认webapp是否被正确加载(检查web.xml没有/目录错误/内容错误/名字拼写错误)(多多关注日志信息). 2…...

嵌入式学习 - 用电控制电

目录 前言&#xff1a; 1、继电器 2、二极管 3、三极管 3.1 特殊的三极管-mos管 3.2 npn类型三极管 3.3 pnp类型三极管 3.4 三极管的放大特性 3.5 mos管和三极管的区别 前言&#xff1a; 计算机的工作的核心原理&#xff1a;用电去控制电。 所有的电子元件都有数据手册…...

QCA组态如何科学命名?

前言 &#xff08;一&#xff09;文献来源 文献来源&#xff1a;[1]Furnari S, Crilly D, Misangyi V F, et al. Capturing causal complexity: Heuristics for configurational theorizing[J]. Academy of Management Review, 2021, 46(4): 778-799. &#xff08;二&#xff…...

外贸行业中常用的邮箱推荐

随着全球贸易的不断发展&#xff0c;外贸行业越来越重要。在这个过程中&#xff0c;电子邮件作为一种重要的沟通工具&#xff0c;扮演着关键的角色。然而&#xff0c;对于许多外贸从业者来说&#xff0c;选择合适的邮箱服务并不容易。本文将探讨外贸邮箱和普通邮箱的区别&#…...

高性能实践

1、认识性能 从用户体验来看&#xff0c;性能就是响应时间短&#xff1b; 从开发角度来看&#xff0c;性能主要是执行效率高。 性能主要表现形式如下&#xff1a; &#xff08;1&#xff09;响应时间&#xff0c;AVG、MAX、MIN、TP95、TP99 &#xff08;2&#xff09;吞吐…...

说说hashCode() 和 equals() 之间的关系?

每天一道面试题&#xff0c;陪你突击金九银十&#xff01; 上一篇关于介绍Object类下的几种方法时面试题时&#xff0c;提到equals()和hashCode()方法可能引出关于“hashCode() 和 equals() 之间的关系&#xff1f;”的面试题&#xff0c;本篇来解析一下这道基础面试题。 先祭一…...

算法通关村-----图的基本算法

图的实现方式 邻接矩阵 定义 邻接矩阵是一个二维数组&#xff0c;其中的元素表示图中节点之间的关系。通常&#xff0c;如果节点 i 与节点 j 之间有边&#xff08;无向图&#xff09;或者从节点 i 到节点 j 有边&#xff08;有向图&#xff09;&#xff0c;则矩阵中的元素值…...

日语AI面试高效通关秘籍:专业解读与青柚面试智能助攻

在如今就业市场竞争日益激烈的背景下&#xff0c;越来越多的求职者将目光投向了日本及中日双语岗位。但是&#xff0c;一场日语面试往往让许多人感到步履维艰。你是否也曾因为面试官抛出的“刁钻问题”而心生畏惧&#xff1f;面对生疏的日语交流环境&#xff0c;即便提前恶补了…...

应用升级/灾备测试时使用guarantee 闪回点迅速回退

1.场景 应用要升级,当升级失败时,数据库回退到升级前. 要测试系统,测试完成后,数据库要回退到测试前。 相对于RMAN恢复需要很长时间&#xff0c; 数据库闪回只需要几分钟。 2.技术实现 数据库设置 2个db_recovery参数 创建guarantee闪回点&#xff0c;不需要开启数据库闪回。…...

树莓派超全系列教程文档--(62)使用rpicam-app通过网络流式传输视频

使用rpicam-app通过网络流式传输视频 使用 rpicam-app 通过网络流式传输视频UDPTCPRTSPlibavGStreamerRTPlibcamerasrc GStreamer 元素 文章来源&#xff1a; http://raspberry.dns8844.cn/documentation 原文网址 使用 rpicam-app 通过网络流式传输视频 本节介绍来自 rpica…...

深入浅出:JavaScript 中的 `window.crypto.getRandomValues()` 方法

深入浅出&#xff1a;JavaScript 中的 window.crypto.getRandomValues() 方法 在现代 Web 开发中&#xff0c;随机数的生成看似简单&#xff0c;却隐藏着许多玄机。无论是生成密码、加密密钥&#xff0c;还是创建安全令牌&#xff0c;随机数的质量直接关系到系统的安全性。Jav…...

用docker来安装部署freeswitch记录

今天刚才测试一个callcenter的项目&#xff0c;所以尝试安装freeswitch 1、使用轩辕镜像 - 中国开发者首选的专业 Docker 镜像加速服务平台 编辑下面/etc/docker/daemon.json文件为 {"registry-mirrors": ["https://docker.xuanyuan.me"] }同时可以进入轩…...

2023赣州旅游投资集团

单选题 1.“不登高山&#xff0c;不知天之高也&#xff1b;不临深溪&#xff0c;不知地之厚也。”这句话说明_____。 A、人的意识具有创造性 B、人的认识是独立于实践之外的 C、实践在认识过程中具有决定作用 D、人的一切知识都是从直接经验中获得的 参考答案: C 本题解…...

USB Over IP专用硬件的5个特点

USB over IP技术通过将USB协议数据封装在标准TCP/IP网络数据包中&#xff0c;从根本上改变了USB连接。这允许客户端通过局域网或广域网远程访问和控制物理连接到服务器的USB设备&#xff08;如专用硬件设备&#xff09;&#xff0c;从而消除了直接物理连接的需要。USB over IP的…...

MySQL账号权限管理指南:安全创建账户与精细授权技巧

在MySQL数据库管理中&#xff0c;合理创建用户账号并分配精确权限是保障数据安全的核心环节。直接使用root账号进行所有操作不仅危险且难以审计操作行为。今天我们来全面解析MySQL账号创建与权限分配的专业方法。 一、为何需要创建独立账号&#xff1f; 最小权限原则&#xf…...

AI,如何重构理解、匹配与决策?

AI 时代&#xff0c;我们如何理解消费&#xff1f; 作者&#xff5c;王彬 封面&#xff5c;Unplash 人们通过信息理解世界。 曾几何时&#xff0c;PC 与移动互联网重塑了人们的购物路径&#xff1a;信息变得唾手可得&#xff0c;商品决策变得高度依赖内容。 但 AI 时代的来…...

C/C++ 中附加包含目录、附加库目录与附加依赖项详解

在 C/C 编程的编译和链接过程中&#xff0c;附加包含目录、附加库目录和附加依赖项是三个至关重要的设置&#xff0c;它们相互配合&#xff0c;确保程序能够正确引用外部资源并顺利构建。虽然在学习过程中&#xff0c;这些概念容易让人混淆&#xff0c;但深入理解它们的作用和联…...