用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 相关文章推荐
Extjs4 GridPanel的主要配置参数详细介绍
Apr 18 Javascript
选择复选框按钮置灰否则按钮可用
May 22 Javascript
jquery和js实现对div的隐藏和显示方法
Sep 26 Javascript
jQuery中$.ajax()和$.getJson()同步处理详解
Aug 12 Javascript
jQuery实现带幻灯的tab滑动切换风格菜单代码
Aug 27 Javascript
javascript手风琴下拉菜单实现代码
Nov 12 Javascript
JS日程管理插件FullCalendar中文说明文档
Feb 06 Javascript
ES6中Generator与异步操作实例分析
Mar 31 Javascript
教你如何用node连接redis的示例代码
Jul 12 Javascript
layui使用数据表格实现购物车功能
Jul 26 Javascript
layui监听单元格编辑前后交互的例子
Sep 16 Javascript
React配置子路由的实现
Jun 03 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
如何在WIN2K下安装PHP4.04
2006/10/09 PHP
深入解析PHP中的(伪)多线程与多进程
2013/07/01 PHP
PHP英文字母大小写转换函数小结
2014/05/03 PHP
PHP数组函数array_multisort()用法实例分析
2016/04/02 PHP
CI框架简单邮件发送类实例
2016/05/18 PHP
针对PHP开发安全问题的相关总结
2019/03/22 PHP
关于this和self的使用说明
2010/08/01 Javascript
jQuery中detach()方法用法实例
2014/12/25 Javascript
详解javascript高级定时器
2015/12/31 Javascript
ajax图片上传,图片异步上传,更新实例
2016/12/30 Javascript
Express与NodeJs创建服务器的两种方法
2017/02/06 NodeJs
Vue 父子组件、组件间通信
2017/03/08 Javascript
jQuery实现table中两列CheckBox只能选中一个的示例
2017/09/22 jQuery
详解如何实现一个简单的Node.js脚手架
2017/12/04 Javascript
Vue中对拿到的数据进行A-Z排序的实例
2018/09/25 Javascript
jQuery ajax仿Google自动提示SearchSuggess功能示例
2019/03/28 jQuery
vuex actions异步修改状态的实例详解
2019/11/06 Javascript
解决vue自定义指令导致的内存泄漏问题
2020/08/04 Javascript
浅析Python 中整型对象存储的位置
2016/05/16 Python
python训练数据时打乱训练数据与标签的两种方法小结
2018/11/08 Python
Python爬虫:url中带字典列表参数的编码转换方法
2019/08/21 Python
python中的线程threading.Thread()使用详解
2019/12/17 Python
浅析Python requests 模块
2020/10/09 Python
澳大利亚巧克力花束和礼品网站:Tastebuds
2019/03/15 全球购物
英国家居用品和家居装饰品购物网站:Cox & Cox
2019/08/25 全球购物
Trench London官方网站:高级风衣和意大利皮夹克
2020/07/11 全球购物
大学总结自我鉴定
2014/01/18 职场文书
公司年会搞笑主持词
2014/03/24 职场文书
经营管理策划方案
2014/05/22 职场文书
门面房租房协议书
2014/08/20 职场文书
2015年乡镇平安建设工作总结
2015/05/13 职场文书
2015年加油站站长工作总结
2015/05/27 职场文书
老干部局2015年度工作总结
2015/10/22 职场文书
坚持不是死撑,更重要的是心态
2019/08/19 职场文书
Python制作一个随机抽奖小工具的实现
2021/07/07 Python
Python万能模板案例之matplotlib绘制甘特图
2022/04/13 Python