用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 相关文章推荐
js兼容的placeholder属性详解
Aug 18 Javascript
将Datatable转化成json发送前台实现思路
Sep 06 Javascript
js点击出现悬浮窗效果不使用JQuery插件
Jan 20 Javascript
javascript与jquery动态创建html元素示例
Jul 25 Javascript
总结十个Angular.js由浅入深的面试问题
Aug 26 Javascript
使用jQuery.Qrcode插件在客户端动态生成二维码并添加自定义Logo
Sep 01 Javascript
jquery对象与DOM对象转化
Feb 08 Javascript
JavaScript实现HTML5游戏断线自动重连的方法
Sep 18 Javascript
详解Vue2.0组件的继承与扩展
Nov 23 Javascript
通过实例解析chrome如何在mac环境中安装vue-devtools插件
Jul 10 Javascript
vue内置组件component--通过is属性动态渲染组件操作
Jul 28 Javascript
小程序自定义弹框效果
Nov 16 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
用php将任何格式视频转为flv的代码
2009/09/03 PHP
怎样给PHP源代码加密?PHP二进制加密与解密的解决办法
2013/04/22 PHP
在WordPress中使用PHP脚本来判断访客来自什么国家
2015/12/10 PHP
PHP中in_array函数使用的问题与解决办法
2016/09/11 PHP
CodeIgniter框架常见用法工作总结
2017/03/16 PHP
pjblog修改技巧汇总
2007/03/12 Javascript
编写兼容IE和FireFox的脚本
2009/05/18 Javascript
利用jquery操作select下拉列表框的代码
2010/06/04 Javascript
基于jquery的网页SELECT下拉框美化代码
2010/10/28 Javascript
nodejs npm包管理的配置方法及常用命令介绍
2014/06/05 NodeJs
轻松创建nodejs服务器(4):路由
2014/12/18 NodeJs
jquery.form.js实现将form提交转为ajax方式提交的方法
2015/04/07 Javascript
javascript实现tab切换的两个实例
2015/11/05 Javascript
JavaScript编写简单的计算器
2015/11/25 Javascript
JS从数组中随机取出几个数组元素的方法
2016/08/02 Javascript
jQuery tagsinput在h5邮件客户端中应用详解
2016/09/26 Javascript
JavaScript+CSS相册特效实例代码
2017/09/07 Javascript
vue项目中导入swiper插件的方法
2018/01/30 Javascript
微信小程序scroll-view横向滑动嵌套for循环的示例代码
2018/09/20 Javascript
layui动态加载多表头的实例
2019/09/05 Javascript
vue+iview实现文件上传
2020/11/17 Vue.js
Python中使用第三方库xlrd来读取Excel示例
2015/04/05 Python
python实现的用于搜索文件并进行内容替换的类实例
2015/06/28 Python
Python模块的定义,模块的导入,__name__用法实例分析
2020/01/07 Python
Python如何执行系统命令
2020/09/23 Python
Python使用Opencv实现边缘检测以及轮廓检测的实现
2020/12/31 Python
纯CSS打造(无图像无js)的非常流行的讲话(语音)气泡效果
2012/12/28 HTML / CSS
利用CSS3实现折角效果实例源码
2016/09/28 HTML / CSS
英国建筑用品在线:Building Supplies Online(BSO)
2018/04/30 全球购物
凯蒂·佩里个人女鞋品牌:Katy Perry Collections
2019/04/04 全球购物
退伍老兵事迹材料
2014/01/31 职场文书
加强干部作风建设整改方案
2014/10/24 职场文书
大国崛起观后感
2015/06/02 职场文书
导游词之蓬莱长岛
2019/12/17 职场文书
Redis 配置文件重要属性的具体使用
2021/05/20 Redis
Python 绘制多因子柱状图
2022/05/11 Python