用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 相关文章推荐
JQuery扩展插件Validate 2通过参数设置验证规则
Sep 05 Javascript
浅析JavaScript原型继承的陷阱
Dec 03 Javascript
jQuery中[attribute!=value]选择器用法实例
Dec 31 Javascript
jQueryUI DatePicker 添加时分秒
Jun 04 Javascript
js判断checkbox是否选中个数的方法(超简单)
Aug 19 Javascript
js利用appendChild对标签进行排序的实现方法
Oct 16 Javascript
vue-resouce设置请求头的三种方法
Sep 12 Javascript
使用 Node.js 模拟滑动拼图验证码操作的示例代码
Nov 02 Javascript
JavaScript数组基于交换的排序示例【冒泡排序】
Jul 21 Javascript
详解JavaScript作用域和作用域链
Mar 19 Javascript
vue项目中锚点定位替代方式
Nov 13 Javascript
vue cli3.0打包上线静态资源找不到路径的解决操作
Aug 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
CodeIgniter框架中_remap()使用方法2例
2014/03/10 PHP
iOS+PHP注册登录系统 PHP部分(上)
2016/12/26 PHP
Laravel 添加多语言提示信息的方法
2019/09/29 PHP
php设计模式之状态模式实例分析【星际争霸游戏案例】
2020/03/26 PHP
PHP获取类私有属性的3种方法
2020/09/10 PHP
关于文本限制字数的js代码
2007/04/02 Javascript
javascript 面向对象编程 function也是类
2009/09/17 Javascript
Tips 带三角可关闭的文字提示
2010/10/06 Javascript
extjs中form与grid交互数据(record)的方法
2013/08/29 Javascript
超精准的javascript验证身份证号的具体实现方法
2015/11/18 Javascript
浅析jQuery中使用$所引发的问题
2016/05/29 Javascript
jQuery Ajax 全局调用封装实例代码详解
2016/06/02 Javascript
深入理解jQuery 事件处理
2016/06/14 Javascript
JavaScript简单实现弹出拖拽窗口(二)
2016/06/17 Javascript
localStorage的黑科技-js和css缓存机制
2017/02/06 Javascript
JS实现多级菜单中当前菜单不随页面跳转样式而发生变化
2017/05/30 Javascript
Windows下快速搭建NodeJS本地服务器的步骤
2017/08/09 NodeJs
vue使用$emit时,父组件无法监听到子组件的事件实例
2018/02/26 Javascript
Vue.js实现表格渲染的方法
2018/09/07 Javascript
微信小程序bindtap事件与冒泡阻止详解
2019/08/08 Javascript
vue实现网络图片瀑布流 + 下拉刷新 + 上拉加载更多(步骤详解)
2020/01/14 Javascript
Python实现列表转换成字典数据结构的方法
2016/03/11 Python
python logging 日志轮转文件不删除问题的解决方法
2016/08/02 Python
Python使用Phantomjs截屏网页的方法
2018/05/17 Python
OpenCV HSV颜色识别及HSV基本颜色分量范围
2019/03/22 Python
Django 开发环境与生产环境的区分详解
2019/07/26 Python
python实现logistic分类算法代码
2020/02/28 Python
Python爬虫实现百度翻译功能过程详解
2020/05/29 Python
python属于软件吗
2020/06/18 Python
Python3中FuzzyWuzzy库实例用法
2020/11/18 Python
护士在校生自荐信
2014/02/01 职场文书
高三毕业寄语
2014/04/10 职场文书
新员工实习期个人工作总结
2015/10/15 职场文书
使用Selenium实现微博爬虫(预登录、展开全文、翻页)
2021/04/13 Python
MySQL系列之十一 日志记录
2021/07/02 MySQL
vue实现列表拖拽排序的示例代码
2022/04/08 Vue.js