发送验证码倒计时 防刷新重置!!!
需求:发送验证码,每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()}
}
注意:记得在登陆成功或者进行后续操作后把缓存清掉
相关文章:
发送验证码倒计时 防刷新重置!!!
需求:发送验证码,每60s可点击发送一次,倒计时中按钮不可点击,且刷新页面倒计时不会重置 可用以下方式避免刷新页面时,倒计时重置 localStorage本地缓存方式 思路: 1.记录倒计时的时间 2.页面加载时&…...
OpenCV项目开发实战--forEach的并行像素访问与其它方法的性能比较
在本教程中,我们将比较Mat 类的forEach方法与 OpenCV 中访问和转换像素值的其他方法的性能。我们将展示forEach如何比简单地使用at方法甚至有效地使用指针算术快得多。 OpenCV 内部有一些隐藏的宝石,有时并不为人所知。这些隐藏的宝石之一是Mat 类的forEach方法,它利用计算…...
cv::Mat 的常见操作方法
cv::Mat是OpenCV库中用于处理图像和矩阵的主要数据结构。以下是一些常见的cv::Mat操作方法: 创建和初始化 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,即java虚拟机,是java代码运行时的环境。我们从底层往上层来说,分别是硬件部分,操作系统,JVM,jre,JDK,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(作者)-BUUCTF-ciscn_2019_s_3 参考文章-博客园-z2yh(作者)-Srop 原理与利用方法 vlun函数中没有分配栈帧(指rsp没有增长,也没有压入父函数的rbp,这也导致…...
3D模型格式转换工具HOOPS Exchange协助Epic Games实现CAD数据轻松导入虚幻引擎
一、面临的挑战 Epic Games最为人所知的身份可能是广受欢迎的在线视频游戏Fortnite的开发商,但它也是虚幻引擎背后的团队,虚幻引擎是一种实时3D创作工具,为世界领先的游戏提供动力,并且也被电影电视、建筑、汽车、制造、模拟等领…...
Linux- inode vnode
什么是inode inode 是 UNIX 和 UNIX-like 操作系统中的一个关键概念。它代表了文件系统中文件或目录的元数据。每个文件和目录在文件系统中都有一个与之关联的 inode。这个数据结构存储了关于文件的所有信息,除了其名称和实际数据之外。 以下是 inode 中通常包含的…...
不来看看?通过Python实现贪吃蛇小游戏
🏅我是默,一个在CSDN分享笔记的博主。📚📚 🌟在这里,我要推荐给大家我的专栏《Python》。🎯🎯 🚀无论你是编程小白,还是有一定基础的程序员,这个专…...
C# linq初探 使用linq查询数组中元素
使用linq进行数组查询 输出数组中全部的偶数并升序输出结果 写法1: 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…...
使用线程池进行任务处理
线程池 线程池:一种线程使用模式。线程过多会带来调度开销,进而影响缓存局部性和整体性能。而线程池维护着多个线程,等待着监督管理者分配可并发执行的任务。这避免了在处理短时间任务时创建与销毁线程的代价。线程池不仅能够保证内核的充分…...
ES6之Map和Set有什么不同?
一、Map 1.定义 Map是ES6提供的一种新的数据结构,它是键值对的集合,类似于对象,但是键的范围不限于字符串,各种类型的值都可以当做键。 Object结构是“字符串-值”的对应,Map结构则是“值-值”的对应 2.代码示例 M…...
Java中的集合
Java中的集合分为单列集合和双列集合,单列集合顶级接口为Collection,双列集合顶级接口为Map。 Collection 的子接口有两个:List和Set。 List 接口的特点:元素可重复,有序(存取顺序)。 List 接…...
9.4.2servlet基础2
一.SmartTomcat 1.第一次使用需要进行配置. 二.异常处理 1.404:浏览器访问的资源,在服务器上不存在. a.检查请求的路径和服务器配置的是否一致(大小写,空格,标点符号). b. 确认webapp是否被正确加载(检查web.xml没有/目录错误/内容错误/名字拼写错误)(多多关注日志信息). 2…...
嵌入式学习 - 用电控制电
目录 前言: 1、继电器 2、二极管 3、三极管 3.1 特殊的三极管-mos管 3.2 npn类型三极管 3.3 pnp类型三极管 3.4 三极管的放大特性 3.5 mos管和三极管的区别 前言: 计算机的工作的核心原理:用电去控制电。 所有的电子元件都有数据手册…...
QCA组态如何科学命名?
前言 (一)文献来源 文献来源:[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. (二ÿ…...
外贸行业中常用的邮箱推荐
随着全球贸易的不断发展,外贸行业越来越重要。在这个过程中,电子邮件作为一种重要的沟通工具,扮演着关键的角色。然而,对于许多外贸从业者来说,选择合适的邮箱服务并不容易。本文将探讨外贸邮箱和普通邮箱的区别&#…...
高性能实践
1、认识性能 从用户体验来看,性能就是响应时间短; 从开发角度来看,性能主要是执行效率高。 性能主要表现形式如下: (1)响应时间,AVG、MAX、MIN、TP95、TP99 (2)吞吐…...
说说hashCode() 和 equals() 之间的关系?
每天一道面试题,陪你突击金九银十! 上一篇关于介绍Object类下的几种方法时面试题时,提到equals()和hashCode()方法可能引出关于“hashCode() 和 equals() 之间的关系?”的面试题,本篇来解析一下这道基础面试题。 先祭一…...
算法通关村-----图的基本算法
图的实现方式 邻接矩阵 定义 邻接矩阵是一个二维数组,其中的元素表示图中节点之间的关系。通常,如果节点 i 与节点 j 之间有边(无向图)或者从节点 i 到节点 j 有边(有向图),则矩阵中的元素值…...
五分钟搞定Python调用ChatGPT,使用Taotoken实现OpenAI兼容接入
🚀 告别海外账号与网络限制!稳定直连全球优质大模型,限时半价接入中。 👉 点击领取海量免费额度 五分钟搞定Python调用ChatGPT,使用Taotoken实现OpenAI兼容接入 对于刚接触大模型API的Python开发者来说,最…...
如何免费使用R3nzSkin游戏皮肤修改器:完整技术指南与内存钩子实战
如何免费使用R3nzSkin游戏皮肤修改器:完整技术指南与内存钩子实战 【免费下载链接】R3nzSkin Skin changer for League of Legends (LOL) 项目地址: https://gitcode.com/gh_mirrors/r3n/R3nzSkin R3nzSkin是一款专为《英雄联盟》设计的开源游戏皮肤修改器&a…...
Kubernetes 监控与可观测性深度解析:Prometheus + Grafana + Loki
Kubernetes 监控与可观测性深度解析:Prometheus Grafana Loki 引言 在云原生环境中,监控与可观测性是保障系统稳定运行的关键。Kubernetes 生态提供了丰富的监控工具,其中 Prometheus、Grafana 和 Loki 组成了完整的可观测性栈。本文将深…...
OpenArm开源机械臂终极指南:从零开始构建你的7自由度人形手臂
OpenArm开源机械臂终极指南:从零开始构建你的7自由度人形手臂 【免费下载链接】openarm A fully open-source humanoid arm for physical AI research and deployment in contact-rich environments. 项目地址: https://gitcode.com/GitHub_Trending/op/openarm …...
保姆级教程:用阿莫K202C-1烧录器搞定国产MCU(GD32/N32/APM32等)
国产MCU高效烧录实战:K202C-1脱机烧录器深度应用指南 1. 国产MCU崛起背景与烧录需求 近年来,国产MCU厂商如GD32、N32、APM32等品牌迅速崛起,凭借性价比优势在工业控制、消费电子等领域逐步替代进口芯片。根据行业调研数据,2023年国…...
聚合物半导体薄膜:柔性电子皮肤如何实现无感健康监测
1. 项目概述:从“硬核”到“柔韧”的健康监测革命如果你还在用那些又厚又硬、贴着皮肤半天就发痒发红的老式健康监测电极,是时候了解一下这个正在改变游戏规则的新玩意儿了——聚合物半导体薄膜。这可不是什么实验室里的遥远概念,它正从顶尖期…...
你的uniapp扫码功能总失灵?可能是PDA广播没配对!手把手教你从设备设置到代码监听
Uniapp与PDA扫码功能深度整合:从硬件配置到代码监听的完整指南 在移动应用开发领域,PDA(便携式数据采集终端)与Uniapp的整合已成为许多企业级应用的核心需求。特别是物流仓储、零售盘点等场景下,扫码功能的稳定性直接关…...
上机器人真能省人吗,先看这几个车间实情
就以我自己的视角,给同样想推动自动化改造的工厂管理者们,聊聊这里面的门道和实在账。很多人问我,你们做自动化集成的是不是就爱忽悠老板砸钱上机器人?听着光鲜,最后落灰的“铁疙瘩”我见得多了。我是自动化老厂的二代…...
LeetCode IPO问题题解
LeetCode IPO问题题解 题目描述 给定初始资本 w,最多完成 k 个项目。每个项目有利润和最低资本要求。找到能够获得的最大资本。 示例: 输入:capital [0,1,2,3], profits [1,2,3,5], k 2, w 0输出:4 解题思路 方法&#…...
租房避坑|在成都,我从“凑合住”到“安心住”经历了什么
姐妹们,千万别被“凤凰大街包租”几个字骗了!我的真实租房血泪史是不是最近总刷到那种“凤凰大街包租”“拎包入住”的宣传?说实话,刚来成都那会儿,我也被这些词儿晃花了眼。想着省心省力,结果踩的坑一个接…...
