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 相关文章推荐
FireFox与IE 下js兼容触发click事件的代码
Nov 20 Javascript
Exitjs获取DataView中图片文件名
Nov 26 Javascript
用JS提交参数创建form表单在FireFox中遇到的问题
Jan 16 Javascript
浅谈javascript中自定义模版
Jan 29 Javascript
使用contextMenu插件实现Bootstrap table弹出右键菜单
Feb 20 Javascript
webpack独立打包和缓存处理详解
Apr 03 Javascript
Vue2递归组件实现树形菜单
Apr 10 Javascript
关于在vue-cli中使用微信自动登录和分享的实例
Jun 22 Javascript
微信小程序动态增加按钮组件
Sep 14 Javascript
vue组件数据传递、父子组件数据获取,slot,router路由功能示例
Mar 19 Javascript
Element实现表格分页数据选择+全选所有完善批量操作
Jun 07 Javascript
原生JS实现汇率转换功能代码实例
May 13 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下利用shell后台运行PHP脚本,并获取该脚本的Process ID的代码
2011/09/19 PHP
php导入大量数据到mysql性能优化技巧
2014/12/29 PHP
javascript 一段左右两边随屏滚动的代码
2009/06/18 Javascript
js 替换功能函数,用正则表达式解决,js的全部替换
2010/12/08 Javascript
对比分析AngularJS中的$http.post与jQuery.post的区别
2015/02/27 Javascript
基于Css3和JQuery实现打字机效果
2015/08/11 Javascript
Angular.js与node.js项目里用cookie校验账户登录详解
2017/02/22 Javascript
Vue.js仿微信聊天窗口展示组件功能
2017/08/11 Javascript
BootStrap 页签切换失效的解决方法
2017/08/17 Javascript
深入掌握 react的 setState的工作机制
2017/09/27 Javascript
angular实现页面打印局部功能的思考与方法
2018/04/13 Javascript
以v-model与promise两种方式实现vue弹窗组件
2018/05/21 Javascript
JS去除字符串最后的逗号实例分析【四种方法】
2019/06/20 Javascript
JQuery中的常用事件、对象属性与使用方法分析
2019/12/23 jQuery
Node.js设置定时任务之node-schedule模块的使用详解
2020/04/28 Javascript
Python访问MySQL封装的常用类实例
2014/11/11 Python
python实现根据窗口标题调用窗口的方法
2015/03/13 Python
详解Python2.x中对Unicode编码的使用
2015/04/03 Python
python调用接口的4种方式代码实例
2019/11/19 Python
pandas实现DataFrame显示最大行列,不省略显示实例
2019/12/26 Python
使用Python内置模块与函数进行不同进制的数的转换
2020/04/26 Python
Python selenium使用autoIT上传附件过程详解
2020/05/26 Python
浅谈keras使用中val_acc和acc值不同步的思考
2020/06/18 Python
Python实现Canny及Hough算法代码实例解析
2020/08/06 Python
css3模拟jq点击事件的实例代码
2017/07/06 HTML / CSS
纯CSS实现的大小渐变、渐远效果
2014/04/15 HTML / CSS
CSS3 3D旋转rotate效果实例介绍
2016/05/03 HTML / CSS
CSS3实现3D翻书效果
2016/06/20 HTML / CSS
美国在线鞋类零售商:LifeStride
2019/06/09 全球购物
智能室内花园:Click & Grow
2021/01/29 全球购物
护士自荐信怎么写
2013/10/18 职场文书
给护士表扬信
2014/01/19 职场文书
超市中秋节促销方案
2014/03/21 职场文书
校园主题婚礼活动策划方案
2014/09/15 职场文书
同学会感言
2015/07/30 职场文书
护理专业毕业自我鉴定
2019/08/12 职场文书