用Javascript实现发送短信验证码间隔功能


Posted in Javascript onFebruary 08, 2021

在很多app和网站中,我们登陆或者注册账号,会有一个发送短信验证码的地方1,然而为了防止恶意获取验证码,我们一般都设置了可点击的时间间隔,时间间隔1完了过后,便又可以继续发送,接下来用代码实现

代码如下

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
手机号码:<input type="text"><button>发送验证码</button>
<script>
  var btn=document.querySelector('button')
  var time=3
  btn.addEventListener('click',function () {
    btn.disabled=true
    var timer=setInterval(function () {
      if (time<0){
        clearInterval(timer)
        btn.disabled=false
        btn.innerHTML='发送验证码'
        time=3
      }else {
        btn.innerHTML = '还剩' + time + '秒'
        time -= 1
      }
    },1000)
  })
</script>
</body>
</html>

效果如下

用Javascript实现发送短信验证码间隔功能

用Javascript实现发送短信验证码间隔功能

用Javascript实现发送短信验证码间隔功能

代码解释
这里因为我们只改变按钮的样式和功能,所以只获取了按钮,然后设置一个time变量,这是倒计时的时间。然后设置点击事件,当我们点击这个按钮过后让这个按钮的disable变为true,意思是不能够点击。
然后设置定时器,判断如果倒计时小于0,那么清除定时器,倒计时结束,让按钮变为可点击,里面的1文字变为发送验证码,接着重新给倒计时赋值为3.
如果倒计时大于0,把按钮里面的文字改为'还剩' + time + ‘秒',time?,每循环一次都判断一次

到此这篇关于用Javascript实现发送短信验证码间隔的文章就介绍到这了,更多相关js发送短信验证码内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
用tip解决Ext列宽度不够的问题
Dec 13 Javascript
jQuery lazyload 的重复加载错误以及修复方法
Nov 19 Javascript
一个分享按钮的插件使用介绍(可扩展,内附开发制作流程)
Sep 19 Javascript
Javascript开发之三数组对象实例介绍
Nov 12 Javascript
jquery中$.post()方法的简单实例
Feb 04 Javascript
javascript实现禁止复制网页内容
Dec 16 Javascript
javascript中eval和with用法实例总结
Nov 30 Javascript
jquery ztree异步搜索(搜叶子)实践
Feb 25 Javascript
详细解读Jquery各Ajax函数($.get(),$.post(),$.ajax(),$.getJSON())
Aug 15 Javascript
解决Linux无法正常安装与卸载Node.js的方法
Jan 19 Javascript
JS数组求和的常用方法总结【5种方法】
Jan 14 Javascript
JS实现“全选”和&quot;全不选&quot;功能代码实例
Feb 06 Javascript
原生js 实现表单验证功能
Feb 08 #Javascript
js面向对象封装级联下拉菜单列表的实现步骤
Feb 08 #Javascript
JavaScript实现点击出现子菜单效果
Feb 08 #Javascript
深入理解javascript中的this
Feb 08 #Javascript
Vue中使用wangeditor富文本编辑的问题
Feb 07 #Vue.js
vue使用lodop打印控件实现浏览器兼容打印的方法
Feb 07 #Vue.js
js基于canvas实现时钟组件
Feb 07 #Javascript
You might like
杏林同学录(三)
2006/10/09 PHP
php巧获服务器端信息
2006/12/06 PHP
php读取30天之内的根据算法排序的代码
2008/04/06 PHP
php5编程中的异常处理详细方法介绍
2008/07/29 PHP
php session 预定义数组
2009/03/16 PHP
php 去除html标记--strip_tags与htmlspecialchars的区别详解
2013/06/26 PHP
PHP调用MySQL存储过程并返回值的方法
2014/12/26 PHP
PHP超全局数组(Superglobals)介绍
2015/07/01 PHP
php自动识别文字编码并转换为目标编码的方法
2015/08/08 PHP
PHP文件下载实例代码浅析
2016/08/17 PHP
php处理单文件、多文件上传代码分享
2016/08/24 PHP
JavaScript 动态生成方法的例子
2009/07/22 Javascript
收集的一些Array及String原型对象的扩展实现代码
2010/12/05 Javascript
Bootstrap Chart组件使用教程
2016/04/28 Javascript
使用jQuery调用XML实现无刷新即时聊天
2016/08/07 Javascript
详解Vue使用 vue-cli 搭建项目
2017/04/20 Javascript
select自定义小三角样式代码(实用总结)
2017/08/18 Javascript
详解angular2 控制视图的封装模式
2018/12/27 Javascript
微信小程序获取位置展示地图并标注信息的实例代码
2019/09/01 Javascript
原生JS实现微信通讯录
2020/06/18 Javascript
vue+element_ui上传文件,并传递额外参数操作
2020/12/05 Vue.js
[46:00]DOTA2上海特级锦标赛主赛事日 - 2 胜者组第一轮#4EG VS Fnatic第一局
2016/03/03 DOTA
[55:35]DOTA2-DPC中国联赛 正赛 CDEC vs Dragon BO3 第二场 1月22日
2021/03/11 DOTA
python线程、进程和协程详解
2016/07/19 Python
Python 实现在文件中的每一行添加一个逗号
2018/04/29 Python
Python DataFrame设置/更改列表字段/元素类型的方法
2018/06/09 Python
Python递归函数实例讲解
2019/02/27 Python
Python综合应用名片管理系统案例详解
2020/01/03 Python
详谈tensorflow gfile文件的用法
2020/02/05 Python
基于PyTorch的permute和reshape/view的区别介绍
2020/06/18 Python
Python下划线5种含义代码实例解析
2020/07/10 Python
俄罗斯街头服装品牌:Black Star Wear
2017/03/01 全球购物
美国现代家具购物网站:LexMod
2019/01/09 全球购物
简述安装Slackware Linux系统的过程
2012/01/12 面试题
员工保密协议范本,您一定得收藏!很有用!
2019/08/08 职场文书
Python爬虫入门案例之回车桌面壁纸网美女图片采集
2021/10/16 Python