如何使用JS实现短信验证码倒计时

在网页的登录注册页面,往往会有验证码功能,为了防止验证码频繁使用,我们往往会设计一个倒计时功能,只有过了这个倒计时,才能继续发生验证码,本文介绍了如何使用原生JavaScript实现倒计时功能。

操作方法

  • 01

    首先打开前端页面编辑器webstorm

  • 02

    创建一个HTML页面用来编写代码

  • 03

    首先我们使用HTML和CSS搭建基本的页面结构:一个文本输入框和一个发送按钮,代码如下

  • 04

    实现的效果如下图

  • 05

    接着我们编写JavaScript代码,首先我们搭建基本的步骤:第一步,创建一个条件变量btnDisable用于阻止倒计时期间再次点击,第二步,编写发送请求的代码(本文已略去),第三步,调用函数进行倒计时

  • 06

    接下来我们实现倒计时函数,主要是使用setTimeout和递归回调

  • 07

    最终实现的效果如下

(0)

相关推荐

  • Axure RP8怎么设计倒计时获取短信验证码效果?

    现在很多网站都会使用短信验证码,该怎么使用axure设计一个带有倒计时的短信验证码呢?下面我们就来看看详细的教程. 要实现倒计时的功能在AXURE中需要借助两个元件配合才能完成,一个元件是“获取短信验 ...

  • 微信总是收不到短信验证码是怎么回事

    手机上面收不到验证码时,可以通过检查网络状态.输入的手机号码.手机短信功能设置.手机欠费情况.手机安全管家短信拦截设置等处理. 方法/步骤 1 检查手机上面的网络状态. 检查手机上面的信号是否正常.稳 ...

  • 微信提示非常用设备登陆需输入短信验证码的解决方法

    昨天微信无法登陆,让大家头疼万分。众多用户尝试各种办法,卸载,重装,重新登录,甚至是……刷机。其实,是腾讯的服务器基础网络故障造成的。等到故障修复完成,我和我的小伙伴都惊呆了,输入账号密码点击登录,微 ...

  • 京东支付为什么是短信验证码支付

    只有余额支付要验证支付密码.其他支付方式要验证短信验证码. 因为京东快捷支付需要关联银行卡:在快捷支付使用中,为了减少持卡人输入银行卡号和卡密码的次数,减少敏感信息泄露的风险,银联提供"账户 ...

  • 微信自助解封没有收到短信验证码?

    长时间收不到短信验证码,可能是以下原因导致: 原因一.获取次数超限 解决方法:每天只能获取20次验证码,如果今日已超过次数请明天再尝试. 原因二.手机业务不支持 解决方法:目前已支持中国三大移动运营商 ...

  • 一招教你在QQ中设置在其它手机或电脑上登录时不需要短信验证码

    相信很多小伙伴都有在使用QQ,在其中如何才能设置在其它手机或电脑上登录时不需要短信验证码呢?方法很简单,下面小编就来为大家介绍.具体如下:1. 首先,打开QQ并登录.进入首页后,点击左上角的头像.2. ...

  • 如何开启搜狗输入法中的“提取短信验证码”功能?

    相信很多小伙伴都有在使用搜狗输入法,那么在其中我们开启提取短信验证码功能呢?方法很简单,下面小编就来为大家介绍.具体如下:1. 首先,打开搜狗输入法.2. 进入软件首页后,点击右下角的"我的 ...

  • 怎么解决小米手机短信验证码收不到的问题?

    我们有时候在使用手机号登陆一些软件的时候需要用到手机验证码,可是有的时候手机会因为一些原因导致我们无法正常收到验证码,那么我们应该如何操作呢?今天,小编就教大家解决小米手机短信验证码收不到的情况.具体 ...

  • 小米9手机锁屏时的短信验证码显示如何屏蔽

    有的小伙伴在使用小米9手机时,想要屏蔽锁屏时的短信验证码的显示,来保护自己的信息安全,但是却不知道该如何及进行操作,那么小编就来为大家介绍一下吧.具体如下:1. 第一步,点击并打开短信软件.2. 第二 ...