用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 相关文章推荐
javascript Prototype 对象扩展
May 15 Javascript
表单JS弹出填写提示效果代码
Apr 16 Javascript
jQuery代码优化 遍历篇
Nov 01 Javascript
5秒后跳转效果(setInterval/SetTimeOut)
May 03 Javascript
浅谈angular2 组件的生命周期钩子
Aug 12 Javascript
JS计算距当前时间的时间差实例
Dec 29 Javascript
pace.js和NProgress.js两个加载进度插件的一点小总结
Jan 31 Javascript
JavaScript类型相关的常用操作总结
Feb 14 Javascript
vue组件中watch props根据v-if动态判断并挂载DOM的问题
May 12 Javascript
在Vue中用canvas实现二维码和图片合成海报的方法
Jun 10 Javascript
vue.js中ref和$refs的使用及示例讲解
Aug 14 Javascript
layui 对弹窗 form表单赋值的实现方法
Sep 04 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+javascript实现二级级联菜单的制作
2008/05/06 PHP
php IP及IP段进行访问限制的代码
2008/12/17 PHP
php $_ENV为空的原因分析
2009/06/01 PHP
破解图片防盗链的代码(asp/php)测试通过
2010/07/02 PHP
PHP求最大子序列和的算法实现
2011/06/24 PHP
windows下zendframework项目环境搭建(通过命令行配置)
2012/12/06 PHP
PHP动态输出JavaScript代码实例
2015/02/12 PHP
php设计模式之备忘模式分析【星际争霸游戏案例】
2020/03/24 PHP
javascript判断ie浏览器6/7版本加载不同样式表的实现代码
2011/12/26 Javascript
js的[defer]和[async]属性
2014/11/24 Javascript
jquery中ready()函数执行的时机和window的load事件比较
2015/06/22 Javascript
jQuery满意度星级评价插件特效代码分享
2015/08/19 Javascript
AngularJS中的拦截器实例详解
2017/04/07 Javascript
jquery ajax加载数据前台渲染方式 不用for遍历的方法
2018/08/09 jQuery
Vue实现美团app的影院推荐选座功能【推荐】
2018/08/29 Javascript
JavaScript中var的重要性实例分析
2019/07/09 Javascript
jQuery实现图片随机切换、抽奖功能(实例代码)
2019/10/23 jQuery
jQuery加PHP实现图片上传并提交的示例代码
2020/07/16 jQuery
[28:48]《真视界》- 2017年国际邀请赛
2017/09/27 DOTA
详解Python中的Descriptor描述符类
2016/06/14 Python
python数据预处理之将类别数据转换为数值的方法
2017/07/05 Python
Python3中函数参数传递方式实例详解
2019/05/05 Python
python 实现list或string按指定分段
2019/12/25 Python
python GUI库图形界面开发之PyQt5布局控件QVBoxLayout详细使用方法与实例
2020/03/06 Python
浅谈keras保存模型中的save()和save_weights()区别
2020/05/21 Python
HTML5中的拖放实现详解
2017/08/23 HTML / CSS
详解使用双缓存解决Canvas clearRect引起的闪屏问题
2019/04/29 HTML / CSS
俄罗斯和世界各地的酒店预订:Hotels.com俄罗斯
2016/08/19 全球购物
Expedia加拿大官方网站:加拿大最大的在线旅游提供商
2017/12/31 全球购物
Larsson & Jennings官网:现代瑞士钟表匠
2018/03/20 全球购物
施华洛世奇新加坡官网:SWAROVSKI新加坡
2020/10/06 全球购物
介绍一下sql server的安全性
2014/08/10 面试题
儿科护士实习自我鉴定
2013/10/17 职场文书
电气自动化个人求职信范文
2014/02/03 职场文书
2015社区个人工作总结范文
2015/05/13 职场文书
Python 解决空列表.append() 输出为None的问题
2021/05/23 Python