用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 相关文章推荐
新页面打开实际尺寸的图片
Aug 25 Javascript
JavaScript setTimeout和setInterval的使用方法 说明
Mar 25 Javascript
比Jquery的document.ready更快的方法
Apr 28 Javascript
jQuery代码优化之基本事件
Nov 01 Javascript
随窗体滑动的小插件sticky源码
Jun 21 Javascript
javascript中简单的进制转换代码实例
Oct 26 Javascript
网页从弹窗页面单选框传值至父页面代码分享
Sep 29 Javascript
JavaScript中各种引用类型的常用操作方法小结
May 05 Javascript
详解vue-router 2.0 常用基础知识点之router.push()
May 10 Javascript
vue.js加载新的内容(实例代码)
Jun 01 Javascript
微信运维交互机器人的示例代码
Nov 12 Javascript
深入理解令牌认证机制(token)
Aug 22 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
linux下使用ThinkPHP需要注意大小写导致的问题
2011/08/02 PHP
PHP记录搜索引擎蜘蛛访问网站足迹的方法
2015/04/15 PHP
PHP简单判断字符串是否包含另一个字符串的方法
2016/03/25 PHP
提交表单后 PHP获取提交内容的实现方法
2016/05/25 PHP
php输出图像的方法实例分析
2017/02/16 PHP
PHP超全局变量实现原理及代码解析
2020/09/01 PHP
jquery Mobile入门—多页面切换示例学习
2013/01/08 Javascript
jQuery中removeAttr()方法用法实例
2015/01/05 Javascript
js实现遮罩层弹出框的方法
2015/01/15 Javascript
jQuery实现的产品自动360度旋转展示特效源码分享
2015/08/21 Javascript
JS简单实现String转Date的方法
2016/03/02 Javascript
使用JS轻松实现ionic调用键盘搜索功能(超实用)
2016/09/06 Javascript
jQuery判断是否存在滚动条的简单方法
2016/09/17 Javascript
基于JQuery及AJAX实现名人名言随机生成器
2017/02/10 Javascript
jQuery实现Table表格隔行变色及高亮显示当前选择行效果示例
2017/02/14 Javascript
Bootstrap table表格初始化表格数据的方法
2018/07/25 Javascript
layer弹窗在键盘按回车将反复刷新的实现方法
2019/09/25 Javascript
vue-cli4使用全局less文件中的变量配置操作
2020/10/21 Javascript
Python中操作mysql的pymysql模块详解
2016/09/13 Python
Pycharm编辑器技巧之自动导入模块详解
2017/07/18 Python
使用pandas中的DataFrame数据绘制柱状图的方法
2018/04/10 Python
Python简单读写Xls格式文档的方法示例
2018/08/17 Python
python:动态路由的Flask程序代码
2019/11/22 Python
在pytorch 中计算精度、回归率、F1 score等指标的实例
2020/01/18 Python
Html5实现移动端、PC端 刮刮卡效果
2016/06/30 HTML / CSS
巴西最大的在线约会网站:ParPerfeito
2018/07/11 全球购物
英国奢侈品牌时尚购物平台:Farfetch(支持中文)
2020/02/18 全球购物
应届毕业生求职信范例分享
2013/12/17 职场文书
八年级历史教学反思
2014/01/10 职场文书
保护环境建议书400字
2014/05/13 职场文书
环境日宣传活动总结
2014/07/09 职场文书
群众路线教育实践活动调研报告
2014/11/03 职场文书
大学生党员个人总结
2015/02/13 职场文书
2015年乡镇纪委工作总结
2015/05/26 职场文书
狂人日记读书笔记
2015/06/30 职场文书
2016年优秀少先队员事迹材料
2016/02/26 职场文书