用Javascript实现发送短信验证码间隔功能

在很多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>

效果如下

代码解释
这里因为我们只改变按钮的样式和功能，所以只获取了按钮，然后设置一个time变量，这是倒计时的时间。然后设置点击事件，当我们点击这个按钮过后让这个按钮的disable变为true，意思是不能够点击。
然后设置定时器，判断如果倒计时小于0，那么清除定时器，倒计时结束，让按钮变为可点击，里面的1文字变为发送验证码，接着重新给倒计时赋值为3.
如果倒计时大于0，把按钮里面的文字改为'还剩' + time + ‘秒'，time–，每循环一次都判断一次

到此这篇关于用Javascript实现发送短信验证码间隔的文章就介绍到这了,更多相关js发送短信验证码内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • javascript发送短信验证码实现代码

    javascript发送短信验证码实现代码

    本文首先分析手机发送验证码的原理,再对javascript发送短信验证码予以实现,具体思路如下: 实现点击"发送验证码"按钮后,按钮依次显示为"59秒后重试"."58秒后重试"-直至倒计时至0秒时再恢复显示为"发送验证码".在倒计时期间按钮为禁用状态 . 第一步.获取按钮.绑定事件.设置定时器变量和计时变量 第二步.添加定时器,每隔1秒钟计时减 1,直至当计时小于等于 0 时清除定时器,按钮恢复为"发送验证码&quo

  • js验证手机号、密码、短信验证码代码工具类

    本文实例为大家分享了js验证手机号.密码.短信验证码的代码工具类,供大家参考,具体内容如下 代码工具类 /** * 参数较验 * * */ var verification = { stop : false, //倒计时 //验证手机号 phone : function (tel, id) { if ("" == tel || !tel) { mui.toast('手机号不可以为空!'); } else { var reg = /^0?1[3|4|5|7|8][0-9]\d{8}$/;

  • JS实现简单短信验证码界面

    1.要实现短信验证码界面,首先要有一个文本框,旁边是按钮,点击时开始倒计时. 2.先创建文本框和按钮,按钮设置对应的id,然后在js中通过id获取按钮这个元素,对其执行操作.同时应设置倒计时时间以及计时器变量,并使点击发送按钮后倒计时结束前无法继续点击按钮重新发送. 3.倒计时结束后,清除计时器,并使文字改变为"重新发送验证码",恢复对按钮能操作的功能,同时使倒计时的数从5秒重新开始以便点击后重新倒计时. <head> <meta charset="UTF-

  • JS实现用户注册时获取短信验证码和倒计时功能

    JS实现用户注册时获取短信验证码和倒计时功能

    在用户注册时,通常需要短信验证码,而且为了交互效果,也需要增加倒计时. 效果如下: <div class="user-form"> <form action="{{ path('zm_member_register') }}" method="post"> <div class="form-list"> <label class="register-label"&g

  • Vue.js实现移动端短信验证码功能

    Vue.js实现移动端短信验证码功能

    现在的短信验证码一般为4位或6位,则页面中会相应的显示4个或6个文本框,如图所示 当点击注册进入到输入验证码页面的时候,第一个框自动获取光标,依次输入,不可直接输入第三个或第四个框的值, input输入框是循环出来的,代码如下: <div class="sms_input"> <div v-for="n in sms.numbers-1"><input v-if="sms.show[n-1]" disabled=&q

  • nodejs接入阿里大鱼短信验证码的方法

    nodejs接入阿里大鱼短信验证码的方法

    之前做过nodejs接入阿里大鱼短信验证码的方法,最近需要回顾,就顺便发到随笔上了 1. 阿里云上申请accessKey 如果已经申请过了,则可以直接使用.否则,首先点击右上角个人信息下拉菜单中的accessKeys进行申请. 2. 阿里云上开通短信服务 阿里大于的短信验证码服务已经并入阿里云中,通过阿里云的控制台->产品与服务->短信服务(在D字头中)进入. 按照阿里云提示的步骤操作,申请短信签名和短信模板,等待审核通过.记录下模板的id. 3. 使用apis-aliyun发送验证码 ```

  • Nodejs 发送Post请求功能(发短信验证码例子)

    直接上代码 sms.js var http = require('http'); var querystring = require('querystring'); function SmsCode() { //发短信 this.send = function (req0, res0) { var code = "3212"; var txt = "您的验证码是:"+code+".请不要把验证码泄露给其他人.如非本人操作,可不用理会!"; var

  • 用Javascript实现发送短信验证码间隔功能

    用Javascript实现发送短信验证码间隔功能

    在很多app和网站中,我们登陆或者注册账号,会有一个发送短信验证码的地方1,然而为了防止恶意获取验证码,我们一般都设置了可点击的时间间隔,时间间隔1完了过后,便又可以继续发送,接下来用代码实现 代码如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head>

  • javascript实现发送短信验证码案例

    javascript实现发送短信验证码案例

    本文实例为大家分享了javascript实现发送短信验证码的具体代码,供大家参考,具体内容如下 效果如下: 代码思路: 1.按钮点击之后,会禁用disabled 为true2.同时按钮里面的内容会变化,注意button里面的内容通过innerHTML修改里面秒数         是有变化的,因此需要用到定时器3.定义一个变量,在定时器里面,不断递减4.如果变量为0说明到了时间,我们需要停止定时器,并且复原按钮初始状态. html部分 <div>         <input type=&

  • Android实现发送短信验证码倒计时功能示例

    Android实现发送短信验证码倒计时功能示例

    一.简介: 开发中在用户注册或找回密码之类的功能,经常会遇到获取短信验证码,获取验证码后需要等待1分钟倒计时,这段时间是不能再次发送短信请求的. 效果图: 二.实现步骤: 1.一个关键类:CountDownTimer(Android系统自带的倒计时功能类) public class CountDownTimerUtils extends CountDownTimer { private TextView mTextView; //显示倒计时的文字 /** * @param textView Th

  • vue 实现通过手机发送短信验证码注册功能

    vue 实现通过手机发送短信验证码注册功能

    效果如下: 代码如下: template代码: <el-main> <el-form :model="ReginForm" ref="ReginForm" :rules="rule" class="regform" label-width="0"> <h3 class="login-text">手机注册</h3> <el-form-i

  • Java实现发送短信验证码功能

    Java实现发送短信验证码功能

    一个发送短信验证码的功能,使用的是信易通的短信平台接口,然后在Java中使用HttpClient模拟POST请求或者GET请求(看短信平台要求,一般的情况下都是POST请求),调用短信平台提供的接口(遵循短信平台的接口规范即可).具体看代码: 使用HttpClient的时候需要在项目中引入: commons-httpclient-3.1.jar 这个jar包, 项目结构: 1.创建一个Http的模拟请求工具类,然后写一个POST方法或者GET方法 /** * 文件说明 * @Descriptio

  • python网络爬虫实现发送短信验证码的方法

    python网络爬虫实现发送短信验证码的方法

    前言:今天要总结的是如何用程序来实现短信发送功能.但是呢,可能需要我们调用一些api接口,我会详细介绍.都是自己学到的,害怕忘记,所以要总结一下,让写博客成为一种坚持的信仰.废话不多说,我们开始吧! 网络爬虫实现发送短信验证码 在实现我们目标的功能之前,我们要有自己的思路,否则你没有方向,又如何实现自己的代码功能呢? 我们要发送短信,那么我们其实是需要分析的.我们可以去分析一个可以发送短信的网站页面. 我们来到这里如下: 可以看到这是一个注册界面,我们在注册时会被要求需要填写手机号码的·,其实还

  • jQuery实现倒计时重新发送短信验证码功能示例

    本文实例讲述了jQuery实现倒计时重新发送短信验证码功能的方法.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html> <head> <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script> <script type="text/javascript"> var countdown

  • javascript实现发送短信倒计时

    javascript实现发送短信倒计时

    本文实例为大家分享了javascript实现发送短信倒计时的具体代码,供大家参考,具体内容如下 实现思路: 1.js获取发送按钮元素对象 2.设置一个发送间隔时间(全局变量) 3.给发送按钮元素对象绑定点击事件- - -onclick, 点击事件处理程序: ① 点击后俺按钮设置成禁用-disabled:true; ② 使用定时函数,时间间隔为1秒, 定时函数调用的函数处理程序: 判断时间是否为0 不为0- - -按钮里的描述内容变为:剩余多少秒,且时间减1 为0- - -则恢复按钮可以点击状态,

  • JAVA实现利用第三方平台发送短信验证码

    JAVA实现利用第三方平台发送短信验证码

    前段时间自己做的一个小项目中,涉及到用短信验证码登录.注册的问题,之前没涉及过这一块,看了别人的博客其实也是似懂非懂的,现在就将自己做的利用第三方短信平台来发送验证码这个功能记下来. 本文以注册为例,在SpringMVC+Spring+Mybatis框架的基础上完成该短信验证码功能. 发送短信验证码的原理是:随机生成一个6位数字,将该6位数字保存到session当中,客户端通过sessionid判断对应的session,用户输入的验证码再与session记录的验证码进行比较. 为了防止有广告嫌疑

随机推荐