发送短信验证码

实现点击“发送验证码”按钮后，按钮依次显示为“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>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
设置按钮是否为禁用时，send.disabled=true; send.disabled=false;

true和false不能加引号!true和false不能加引号!true和false不能加引号!否则值永远为真。

也可用send.setAttribute('disabled','disabled');

或send.removeAttribute('disabled');
  • 1
  • 2
  • 3
  • 4

转载：http://blog.csdn.net/i10630226/article/details/49531083

超实用的JavaScript代码段 Item4 --发送短信验证码的更多相关文章

  1. 微信小程序发送短信验证码完整实例

    微信小程序注册完整实例,发送短信验证码,带60秒倒计时功能,无需服务器端.效果图: 代码: index.wxml <!--index.wxml--> <view class=&quo ...

  2. java 阿里云接口实现发送短信验证码

    此刻自己做的小项目中,需要用到手机发送短信验证码实现注册功能,于是就去阿里云注册了账号,并实现随机发送验证码的功能 第一步:在阿里云官网登录注册   已有支付宝或淘宝的账号可以直接登录,最后需要实名认 ...

  3. Java 实现手机发送短信验证码

    Java 实现手机发送短信验证码 采用引入第三方工具的方式,网上查了半天,发现简单的实现方式便是注册一个中国网建的账号,新建账号的时候会附带赠几条免费短信,彩信 ,之后想要在使用就得花钱了.简单的操作 ...

  4. Yii2发送短信验证码完全解决方案

    概述 在做项目的时候,需要用到短信发送验证码功能.不能不说Yii2的牛逼,很容易就搞定了.下面我整理一下具体功能和流程,分享给大家. 主要功能 通过Yii2 rules验证手机号 通过js验证是否为手 ...

  5. 阿里云短信服务发送短信验证码（JAVA开发此功能）

    开发此功能需注册阿里云账号,并开通短信服务(免费开通) 充值后,不会影响业务的正常使用!(因为发送验证类短信:1-10万范围的短信是0.045元/条).开发测试使用,充2块钱测试足够了 可参考阿里云官 ...

  6. Python3实现发送邮件和发送短信验证码

    Python3实现发送邮件和发送短信验证码 Python3实现发送邮件: import smtplib from email.mime.text import MIMEText from email. ...

  7. day101:MoFang:模型构造器ModelSchema&注册功能之手机号唯一验证/保存用户注册信息/发送短信验证码

    目录 1.模型构造器:ModelSchema 1.SQLAlchemySchema 2.SQLAlchemyAutoSchema 2.注册功能基本实现 1.关于手机号码的唯一性验证 2.保存用户注册信 ...

  8. java实现发送短信验证码

    java实现短信验证码发送 由于我们使用第三方平台进行验证码的发送,所以首先,我们要在一个平台进行注册. 在这里我选择是秒嘀科技,因为新人注册会赠送十元,足够测试使用了. 注册完成后,我们需要获取自己 ...

  9. Laravel5中使用阿里大于(鱼)发送短信验证码

    在做用户注册和个人中心的安全管理时,我实现借助第三方短信平台(阿里大于(鱼))在Laravel框架中进行手机验证的设置:阿里大于,是阿里通信旗下优质便捷的云通信服务平台,整合了三大运营商的通信能力,为 ...

随机推荐

  1. window删除损坏无法打开的文件

    移动硬盘删除文件时提示“文件或目录损坏且无法读取”的解决方法-chkdsk 命令的巧用 新买一个移动硬盘,同学借去Copy一个游戏,拷来后发现数据包损坏,提示"文件或目录损坏且无法读取&qu ...

  2. jquery之html(),text()方法详解

    一:html() html()函数用于设置或返回当前jQuery对象所匹配的DOM元素内的html内容. 该函数的用途相当于设置或获取DOM元素的innerHTML属性值. 该函数属于jQuery对象 ...

  3. SDP学习笔记

    一.SDP规范了回话描述的格式,一般结合会话协议共同工作. 常见的会话传送协议包括:SAP(Session Announcement Protocol 会话公告协议),SIP,RTSP,HTTP,和使 ...

  4. eclipse启动报错eclipse failed to create the java virutal machine

    早上一来,我的eclipse就无法启动了,错误就是这句话: eclipse failed to create the java virutal machine 直译就是eclipse无法创建JAVA虚 ...

  5. 迷你sql profile，给缺少sql跟踪的朋友们

    如果你的数据库没有sqlprofile,看这里. 如果你没时间装sqlserver那一系列的东西,看看这里,也许能解决呢. 这是一个迷你版的sqlprofile ,在win7下测试,链接sqlserv ...

  6. eclipse svn异常：RA layer request failed 的解决方案

    这几天svn总是出问题,网上搜了好多资料,今天才真正找到解决办法. RA layer request failedsvn: OPTIONS of 'https://192.168.0.104/svn/ ...

  7. Linux命令工具 top详解

    Linux命令工具 top详解 top命令是Linux下常用的性能分析工具,能够实时显示系统中各个进程的资源占用状况,类似于Windows的任务管理器.top是一个动态显示过程,即可以通过用户按键来不 ...

  8. JSON的操作

    今天遇到了一个要解析JSON的需求.在http://stackoverflow.com/questions/1826727/how-do-i-parse-json-with-ruby-on-rails ...

  9. ASP.NET常用正则表达式

    验证数字:^[0-9]*$ 验证n位的数字:^\d{n}$ 验证至少n位数字:^\d{n,}$ 验证m-n位的数字:^\d{m,n}$ 验证零和非零开头的数字:^(0|[1-9][0-9]*)$ 验证 ...

  10. iOS - File Archive/UnArchive 文件压缩/解压

    1.ZipArchive 方式 ZipArchive 只能对 zip 类文件进行压缩和解压缩 GitHub 网址:https://github.com/ZipArchive/ZipArchive Zi ...