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

本文首先分析手机发送验证码的原理,再对javascript发送短信验证码予以实现,具体思路如下:
实现点击“发送验证码”按钮后,按钮依次显示为“59秒后重试”、“58秒后重试”…直至倒计时至0秒时再恢复显示为“发送验证码”。在倒计时期间按钮为禁用状态 .

第一步、获取按钮、绑定事件、设置定时器变量和计时变量

第二步、添加定时器,每隔1秒钟计时减 1,直至当计时小于等于 0 时清除定时器,按钮恢复为“发送验证码”,否则显示为“X秒后重试”

效果图:

实现代码:

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script type="text/javascript">
  window.onload=function(){
    var send=document.getElementById('send'),
      times=60,
      timer=null;
    send.onclick=function(){
     // 计时开始
     var that = this;
      this.disabled=true;
      timer = setInterval(function(){
        times --;
        that.value = times + "秒后重试";
        if(times <= 0){
          that.disabled =false;
          that.value = "发送验证码";
          clearInterval(timer);
          times = 60;
        }
        //console.log(times);
      },1000);
    }
  }
  </script>
</head>
<body>
  <input type="button" id="send" value="发送验证码">
</body>
</html>

注意点:

设置按钮是否为禁用时,send.disabled=true; send.disabled=false;
true和false不能加引号!true和false不能加引号!true和false不能加引号!否则值永远为真。
也可用send.setAttribute('disabled','disabled');
或send.removeAttribute('disabled');

以上就是为大家分享的javascript发送短信验证码全部代码,希望对大家的学习有所帮助。

时间: 2015-11-09

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

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

基于JS实现发送短信验证码后的倒计时功能(无视页面刷新,页面关闭不进行倒计时功能)

相关阅读: 基于jQuery实现发送短信验证码后的倒计时功能(无视页面关闭) 下面一段代码是小编给大家带来的js发送短信验证码后实现倒计时功能,代码简单易懂. 具体代码如下所示: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus

JS短信验证码倒计时功能的实现(没有验证码,只有倒计时)

1.功能描述 当用户想要获取验证码时,就点击 免费获取验证码 ,然后开始倒计时,倒计时期间按钮文字为剩余时间x秒,且不可按状态,倒计时结束后,按钮更改为点击重新发送. 2.分析 必须用到定时器.按钮点击后,在定时器内做出判断.倒计时60秒,到0结束. 3.代码实现: 重点介绍:定时器在进行下一次倒计时之前,一定要清除一下,这样的话保证下一次定时器倒计时是正常的. <!DOCTYPE html> <html> <head> <meta charset="U

Nodejs实现短信验证码功能

使用Nodejs的开发者愈来越多,基于Nodejs的后台开发也多了起来,像短信验证码.短信群发.国际短信这些需求,完全可以采用第三方接口来实现,云片就提供了这样的接口. Nodejs // 修改为您的apikey.可在官网(https://www.yunpian.com)登录后获取 var https = require('https'); var qs = require('querystring'); var apikey = 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

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}$/;

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

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

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

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

vue2之简易的pc端短信验证码的问题及处理方法

<提示语部分不要在意(非重点部分)> 简单说下布局(采用的是 vue的element ui的ui框架 )进行布局操作的 子组件模板部分如下(code部分是很基础的) <template> <div class="forget"> <el-dialog title="修改新密码" :visible.sync="dialog.visible" :close-on-click-modal="false

Spring MVC 中 短信验证码功能的实现方法

在外部网站中短信的验证很有必要,比如在实现注册.验证用户信息等的情况下.在SpringMVC中的实现如下: 短信接口 短信接口,有些企业会购买的有移动的短信平台接口.如果是个人或者是小企业可以使用一些云服务的.比如百度的API Store上面的. 我使用的是:http://apistore.baidu.com/apiworks/servicedetail/1018.html 当然短信接口肯定都是要付费的,而且是基于模板的,具体的使用说明可以看这个网址里面的使用说明. 前端界面 前端的界面,可能如

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

Android中用Bmob实现短信验证码功能的方法详解

这篇文章主要介绍发送验证码和校验验证码的功能,用到一个第三方平台Bmob,那Bmob是什么呢?Bmob可以开发一个云存储的移动应用软件,他提供了大量的标准的API接口,根据需要接入相关服务,开发者可以更加专注于应用的开发,让产品交付更快速,验证码功能就是其中一个. 一.跟其他第三方一样,我们开发之前要做一些准备工作. 1.首先,去官网注册一个帐号:http://www.bmob.cn/: 2.然后就可以创建应用了:具体怎么做Bmob说得很清楚了(官方操作介绍),如果你不想看,我简单说一下:点击右

Android自动获取短信验证码功能

先给大家展示下效果图,如果大家感觉不错,请参考实现代码. 1.自定义监听类 /** * 短信监听器,用于自动填充验证码 */ public class SMSContentObserver extends ContentObserver { public final String SMS_URI_INBOX = "content://sms/inbox";//收信箱 private Activity activity = null; private String smsContent

Android自动填充短信验证码功能(demo)

项目需求: Android开发中用户登录往会用到短信验证的功能,如果让用户先查看短信,然后再回到界面填写验证码,用户体验不是很好,有时就需要实现验证码的自动填写功能. 做法: 我以前的做法是先创建一个广播接收器,接受短信变化的广播,收到广播时,再把验证码提取出来. 那时有用户测试反馈他的手机安装了其他一些短信应用或者手机本身限制了权限的情况下,这种方式可能起不了作用,即使把优先级设高,也不能保证不会被别的应用抢先. 以前用户卸载掉第三方软件后,就没再追究了. 现在发现可以通过监听短信数据库的方式

php利用云片网实现短信验证码功能的示例代码

本文将以php举例,介绍网页短信验证码功能的实现. 在众多的第三方短信服务商中我选择了云片网这个短信服务商,本文也将尽可能利用最简单的方式去帮助广大开发者解决短信验证码功能模块的实现. 再次之前我也参考了大部分网上的博客等,大多数都是把云片网的demo原封不动搬上去,对于我这个前端人员来说,根本毫无头绪,故此我将细致的讲解如何操作,以及献上我的源码. 我的业务流程就是通过点击发送验证码这个按钮,触发一个ajax请求事件,将手机号发送到后台,后台生成验证码发送到手机端,并返回这个验证码给前台进行验

Python3实现发送邮件和发送短信验证码功能

Python3实现发送邮件: import smtplib from email.mime.text import MIMEText from email.utils import formataddr my_sender = '1434399884@qq.com' # 发件人邮箱账号 my_pass = '*********' # 发件人邮箱的授权码 my_user = '3152609963@qq.com' # 收件人邮箱账号,我这边发送给自己 def mail(): ret= True t

SpringSceurity实现短信验证码功能的示例代码

一.思考 1.设计思路 在获取短信验证码功能和图形验证码还是有很多相似的地方,所以这里在设计获取短信验证的时候,将之前开发好的的图形验证码进一步整合.抽象与重构. 在获取验证码的时候,它们最大的不同在于: 图形验证码是通过接口返回获取給前端.而短信验证码而言是通过第三方API向我们手机推送. 但是它们在登陆的时候就有很大的不同了,对于图形验证码而言验证通过之前就走UsernamePasswordAuthenticationFilter 过滤器了开始校验用户名密码了. 但对于短信登陆而言,确实也需