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


Posted in Javascript onNovember 12, 2015

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

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

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

效果图:

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

实现代码:

<!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发送短信验证码全部代码,希望对大家的学习有所帮助。

Javascript 相关文章推荐
用JavaScript页面不刷新时全选择,全删除(GridView)
Apr 14 Javascript
JSQL  一个 web DB 的封装
May 05 Javascript
javascript函数定义的几种区别小结
Jan 06 Javascript
JavaScript实现图片DIV竖向滑动的方法
Apr 25 Javascript
jQuery ui实现动感的圆角渐变网站导航菜单效果代码
Aug 26 Javascript
JS+CSS实现自动切换的网页滑动门菜单效果代码
Sep 14 Javascript
bootstrap table小案例
Oct 21 Javascript
jQuery学习笔记之入门
Dec 14 Javascript
使用重写url机制实现验证码换一张功能
Aug 01 Javascript
vue计算属性时v-for处理数组时遇到的一个bug问题
Jan 21 Javascript
JavaScript中 ES6变量的结构赋值
Jul 10 Javascript
浅入深出Vue之自动化路由
Aug 06 Javascript
javascript倒计时效果实现
Nov 12 #Javascript
基于jquery步骤进度条源码分享
Nov 12 #Javascript
javascript手风琴下拉菜单实现代码
Nov 12 #Javascript
javascript弹出窗口实现代码
Nov 12 #Javascript
javascript实现tab切换特效
Nov 12 #Javascript
window.location.reload 刷新使用分析(去对话框)
Nov 11 #Javascript
JavaScript中获取Radio被选中的值
Nov 11 #Javascript
You might like
php中记录用户访问过的产品,在cookie记录产品id,id取得产品信息
2011/05/04 PHP
PHP生成等比缩略图类和自定义函数分享
2014/06/25 PHP
PHP7.1实现的AES与RSA加密操作示例
2018/06/15 PHP
PHP安装BCMath扩展的方法
2019/02/13 PHP
js 通用javascript函数库整理
2011/08/14 Javascript
容易造成JavaScript内存泄露几个方面
2014/09/04 Javascript
javascript实现汉字转拼音代码分享
2015/04/20 Javascript
JS+CSS实现简单滑动门(滑动菜单)效果
2015/09/19 Javascript
ES6所改良的javascript“缺陷”问题
2016/08/23 Javascript
微信小程序去哪里找 小程序到底如何使用(附小程序名单)
2017/01/09 Javascript
微信小程序城市定位的实现实例(获取当前所在国家城市信息)
2017/05/17 Javascript
完美解决手机浏览器顶部下拉出现网页源或刷新的问题
2017/11/30 Javascript
原生JS实现逼真的图片3D旋转效果详解
2019/02/16 Javascript
微信小程序实现左侧滑动导航栏
2020/04/08 Javascript
微信小程序地图绘制线段并且测量(实例代码)
2020/01/02 Javascript
vue中keep-alive内置组件缓存的实例代码
2020/04/16 Javascript
javascript 使用sleep函数的常见方法详解
2020/04/26 Javascript
Python下singleton模式的实现方法
2014/07/16 Python
Python常用正则表达式符号浅析
2014/08/13 Python
跟老齐学Python之眼花缭乱的运算符
2014/09/14 Python
Python爬取国外天气预报网站的方法
2015/07/10 Python
为什么Python中没有&quot;a++&quot;这种写法
2018/11/27 Python
python pygame实现球球大作战
2019/11/25 Python
matplotlib quiver箭图绘制案例
2020/04/17 Python
什么是python类属性
2020/06/10 Python
在keras中model.fit_generator()和model.fit()的区别说明
2020/06/17 Python
css3的transform中scale缩放详解
2014/12/08 HTML / CSS
有关HTML5中背景音乐的自动播放功能
2017/10/16 HTML / CSS
很酷的小工具和电子产品商城:GearBest
2016/11/19 全球购物
粉红色的鲸鱼:Vineyard Vines
2018/02/17 全球购物
奖学金自我鉴定范文
2013/10/03 职场文书
内容编辑个人求职信
2013/12/10 职场文书
幼儿园小班家长寄语
2014/04/02 职场文书
员工安全生产承诺书
2014/05/22 职场文书
高中生国庆节演讲稿范文2014
2014/09/21 职场文书
vue使用element-ui按需引入
2022/05/20 Vue.js