前端实现手机短信验证码倒计时效果

news/2024/11/19 23:11:40/

实现效果:实现按钮倒计时10s后可重新发送验证码

一、思路
1、禁用按钮,调用后端接口,获取验证码
2、setTimeOut(() => {},1000)延迟1s执行,time - 1,返回文案,9s
3、迭代处理,调用自身函数,time - 1,返回文案,8s,实现9s 8s 7s 这样倒计时的效果。
4、不能无限迭代减1,判断时间为最后一秒时,解除按钮禁用状态

二、代码

    sendVerifyCode() {this.verifyCodeDisable = true;// 调用后端接口获取验证码this.getVerifyCode()// 初始化倒计时时间let time = 10;this.setTime(time)},setTime(time) {setTimeout(() => {if (time > 1) {time--;// 返回文案this.tips = time + 's';// 迭代调用this.setTime(time)} else {// 倒计时最后一秒,解除禁用状态,可重新发送验证码this.verifyCodeDisable = false;this.tips = '获取验证码';}}, 1000)}


http://www.ppmy.cn/news/1260379.html

相关文章

华为OD机试真题-CPU算力分配-2023年OD统一考试(C卷)

题目描述: 现有两组服务器A和B,每组有多个算力不同的CPU,其中A[i]是A组第i个CPU的运算能力,B[i]是B组第i个CPU的运算能力。一组服务器的总算力是各CPU的算力之和。为了让两组服务器的算力相等,允许从每组各选出一个CPU进行一次交换,求两组服务器中,用于交换的CPU的算力,…

04 硬件知识入门(二极管)

1 二极管的定义 导电性能介于导体与绝缘体之间的材料称为半导体,常见的半导体材料有硅、锗和硒等。利用半导体材料可以制作各种各样的半导体元器件,如二极管、三极管、场效应管和晶闸管等都是由半导体材料制作而成的。 2 二极管的简介 1.半…

当初为什么选择计算机这类的行业?

CSDN给了这么一个话题: 还记得当初自己为什么选择计算机? 当初你问我为什么选择计算机,我笑着回答:“因为我梦想成为神奇的码农!我想像编织魔法一样编写程序,创造出炫酷的虚拟世界!”谁知道&…

Pytorch CIFAR10图像分类 ShuffleNetv2篇

Pytorch CIFAR10图像分类 ShuffleNetv2篇 文章目录 Pytorch CIFAR10图像分类 ShuffleNetv2篇4. 定义网络(ShuffleNetv2)高效网络设计实用指南指南一:同等通道大小最小化内存访问量指南二:过量使用组卷积会增加MAC指南三&#xff1…

【前端设计模式】之工厂模式

工厂模式特性 工厂模式是一种创建对象的设计模式,它通过使用工厂类来封装对象的创建逻辑,隐藏了具体对象的实例化过程。工厂模式的主要特性包括: 封装对象的创建过程:工厂模式将对象的创建过程封装在一个工厂类中,客…

Spring MVC学习随笔-文件下载和上传(配置文件上传解析器multipartResolver)

学习视频:孙哥说SpringMVC:结合Thymeleaf,重塑你的MVC世界!|前所未有的Web开发探索之旅 学习视频:【编程不良人】继spring之后快速入门springmvc,面对SpringMVC不用慌 六、SpringMVC 文件上传下载 6.1 文件…

异常(C++)

异常 前言一、程序的错误分类二、异常1. 概念2. 捕获异常的关键字和格式3. 异常的使用异常的原则异常再抛出异常说明注意事项 4. 自定义异常体系5. C标准库的异常体系 三、总结 前言 在程序运行时经常碰到一些错误,例如年龄、身高不能为负,除数为0等&…

如何在Spring Boot中优雅地重试调用第三方API?

文章目录 1. 引言2. 重试机制的必要性3. Spring Retry简介4. Spring Boot中使用Spring Retry实现重试4.1 添加依赖4.2 配置重试策略4.2.1 代码示例 4.3 降级处理4.3.1 代码示例 5. 异步重试5.1 异步方法的重试5.1.1 代码示例 5.2 异步方法的降级处理5.2.1 代码示例 6. 异常分类…