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

实现效果:实现按钮倒计时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.mzph.cn/news/202709.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

6.1810: Operating System Engineering 2023 <Lab3: page tables>

一、本节任务 实验环境: 二、要点 如何防止程序破坏内核或其他进程空间?隔离地址空间,进程只能读写自己的内存空间。 在保证隔离的同时,如何将多个地址空间复用到一个物理内存上?虚拟内存/页表。操作系统通过页表来为…

DDSP-SVC-3.0完全指南:一步步教你用AI声音开启音乐之旅

本教程教你怎么使用工具训练数据集推理出你想要转换的声音音频,并且教你处理剪辑伴奏和训练后的音频合并一起,快来试试看把! 1.使用的工具 要想训练ai声音,首先需要有各种工具,还需要我们提供你需要训练的声音&#…

Avalonia中如何将View事件映射到ViewModel层

前言 前面的文章里面我们有介绍在Wpf中如何在View层将事件映射到ViewModel层的文章,传送门,既然WPF和Avalonia是两套不同的前端框架,那么WPF里面实现模式肯定在这边就用不了,本篇我们将分享一下如何在Avalonia前端框架下面将事件…

陀螺仪LSM6DSV16X与AI集成(2)----姿态解算

陀螺仪LSM6DSV16X与AI集成.2--姿态解算 概述视频教学样品申请完整代码下载欧拉角万向节死锁四元数法姿态解算双环PI控制器偏航角陀螺仪解析代码上位机通讯加速度演示陀螺仪工作方式主程序演示 概述 LSM6DSV16X包含三轴陀螺仪与三轴加速度计。 姿态有多种数学表示方式&#xff…

多人聊天室

多人聊天包 由于要先创建服务面板,接收客户端连接的信息,此代码使用顺序为先启动服务端,在启动客户端,服务端不用关,不然会报错。多运行几次客户端,实现单人聊天 1.创建服务面板 package yiduiy;import j…

【计算机二级MS Office】word(上)

这里写目录标题 文件选项卡保存和另存为属性检查文档 开始选项卡字体更改字体和字号设置中文和英文为两种不同字体的快捷方式介绍其余图标文本效果突出颜色如何挑选字体颜色字符底纹带圈字符字体对话框(隐藏) 段落 插入选项卡设计选项卡布局选项卡引用选…

【头歌系统数据库实验】实验6 SQL的多表查询-2

目录 第1关:查询每个选手的信息及其提交的解答信息,没做题的选手不显示 第2关:查询做了1001题且耗时大于500(time)的选手信息 第3关:查询所有选手信息及其提交的解答信息,没做题的选手也要显…

力扣每日一题:2646. 最小化旅行的价格总和(2023-12-06)

力扣每日一题 题目:2646. 最小化旅行的价格总和 日期:2023-12-06 用时:30 m 14 s 时间:8ms 内存:42.98MB 思路:先统计旅行中每个节点路过的次数(dfs方法),再计算减半后的…

Spring Boot学习(三十三):集成kafka

前言 下面是zookeeper和kafka的官网下载地址,大家可以学习下载 zookeeper下载地址:http://zookeeper.apache.org/releases.html kafka下载地址:http://kafka.apache.org/downloads.html 1、添加依赖 在 pom.xml 文件中添加kafka依赖&am…

项目中使用之Maven BOM

✅作者简介:大家好,我是Leo,热爱Java后端开发者,一个想要与大家共同进步的男人😉😉 🍎个人主页:Leo的博客 💞当前专栏: 工具教程 ✨特色专栏: MyS…

Linux文件部分知识

目录 认识inode 如何理解创建一个空文件? 如何理解对文件写入信息? 如何理解删除一个文件? 为什么拷贝文件的时候很慢,而删除文件的时候很快? 如何理解目录 ​编辑 文件的三个时间 ​编辑 Access: …

Linux系统调试课:网络性能工具总结

文章目录 一、网络性能指标二、netstat三、route四、iptables沉淀、分享、成长,让自己和他人都能有所收获!😄 📢本篇章一起了解下网络性能工具。 一、网络性能指标 从网络性能指标出发,你更容易把性能工具同系统工作原理关联起来,对性能问题有宏观的认识和把握。这样,…

【LeetCode刷题-链表】--92.反转链表II

92.反转链表II /*** Definition for singly-linked list.* public class ListNode {* int val;* ListNode next;* ListNode() {}* ListNode(int val) { this.val val; }* ListNode(int val, ListNode next) { this.val val; this.next next; }* }*/ cla…

前端JavaScript入门-day08-正则表达式

目录 介绍 语法 元字符 边界符 量词 字符类: 修饰符 介绍 正则表达式(Regular Expression)是用于匹配字符串中字符组合的模式。在 JavaScript中,正则表达式也是对象,通常用来查找、替换那些符合正则表达式的…

服务器同时连接数突然变高是什么原因_Maizyun

服务器同时连接数突然变高的原因 在服务器运行过程中,我们有时会发现服务器的同时连接数突然变高。这种情况可能会引发一系列问题,如性能下降、资源耗尽等。那么,导致服务器同时连接数突然变高的原因有哪些呢?本文将对此进行探讨…

计算机设计大赛 选题推荐

0 前言 比赛介绍 中国大学生计算机设计大赛是中国高等教育学会“全国普通高校大学生竞赛排行榜”竞赛之一。自2008年开赛至2019年,一直由教育部高校与计算机相关教指委等或独立或联合主办。2023年(第16届)中国大学生计算机设计大赛是由、中…

书-用数组存储高于60低于70的人单独存起来

#include<stdio.h> # define N 10 //书-用数组存储高于60低于70的人单独存起来 int main(){float s[N]{68.2,62.3,63.4,34.5,45.6,56.7,67.8,78.9,89.0,100};int i;float diyu[100];int j0;for(i0;i<N;i){if(s[i]>60 && s[i]<70)diyu[j]s[i];//这里的范…

【SQL思考记录】力扣181. 超过经理收入的员工

原题链接 SQL 语句解释 此SQL查询旨在找出在公司中薪水高于其经理的员工。具体的查询语句和逻辑如下&#xff1a; SELECT a.Name AS Employee FROM Employee AS a,Employee AS b WHERE a.ManagerId b.IdAND a.Salary > b.Salary;组件解释&#xff1a; SELECT a.Name AS E…

【数据结构】——二叉树特点

前言&#xff1a;我们前面已经了解了二叉树的一些概念&#xff0c;那么我们今天就来了解下二叉树的遍历实现和一些性质。 二叉树的遍历方式有三种&#xff1a;前序&#xff0c;中序&#xff0c;后序。 前序&#xff1a;先根节点&#xff0c;再左子树&#xff0c;最后右子树。 中…

husky \ lint-staged \ commitlint 实现代码提交前检查

话不多说&#xff0c;直接上步骤&#xff1a; 1、安装husky pnpm install husky -D 2、在 package.json 的 script 添加命令 "scripts": {"prepare": "husky install" } 3、执行 pnpm run prepare 执行完项目根目录也会出现一个.husky文件…