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 中 null、NaN和undefined的区别总结
Apr 10 Javascript
关于eval 与new Function 到底该选哪个?
Apr 17 Javascript
jquery弹出关闭遮罩层实例
Aug 06 Javascript
JS实现控制表格行文本对齐的方法
Mar 30 Javascript
JavaScript实现页面跳转的几种常用方式
Nov 28 Javascript
基于jQuery实现点击最后一行实现行自增效果的表格
Jan 12 Javascript
js ajaxfileupload.js上传报错的解决方法
May 05 Javascript
JS实现的RGB网页颜色在线取色器完整实例
Dec 21 Javascript
详谈Node.js之操作文件系统
Aug 29 Javascript
JavaScript中十种一步拷贝数组的方法实例详解
Apr 22 Javascript
微信小程序蓝牙连接小票打印机实例代码详解
Jun 03 Javascript
如何用JavaScript学习算法复杂度
Apr 30 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
骨王战斗力在公会成员中排不进前五,却当选了会长,原因竟是这样
2020/03/02 日漫
关于php mvc开发模式的感想
2011/06/28 PHP
php下载文件,添加响应头的简单实例
2016/09/22 PHP
PHP实现无限分类的实现方法
2016/11/14 PHP
php中青蛙跳台阶的问题解决方法
2018/10/14 PHP
Smarty模板类内部原理实例分析
2019/07/03 PHP
Thinkphp5框架实现获取数据库数据到视图的方法
2019/08/14 PHP
thinkphp框架实现路由重定义简化url访问地址的方法分析
2020/04/04 PHP
jQuery设置div一直在页面顶部显示的方法
2013/10/24 Javascript
Javascript中的call()方法介绍
2015/03/15 Javascript
jQuery实现的跨容器无缝拖动效果代码
2016/06/21 Javascript
jQuery html表格排序插件tablesorter使用方法详解
2017/02/10 Javascript
Angular实现响应式表单
2017/08/04 Javascript
Vue+mui实现图片的本地缓存示例代码
2018/05/24 Javascript
9102年webpack4搭建vue项目的方法步骤
2019/02/20 Javascript
Vue+axios封装请求实现前后端分离
2020/10/23 Javascript
javascript实现倒计时提示框
2021/03/02 Javascript
[34:41]夜魇凡尔赛茶话会 第二期02:你画我猜
2021/03/11 DOTA
Pyramid添加Middleware的方法实例
2013/11/27 Python
Python提取Linux内核源代码的目录结构实现方法
2016/06/24 Python
Python机器学习之SVM支持向量机
2017/12/27 Python
Python并发编程协程(Coroutine)之Gevent详解
2017/12/27 Python
解决DataFrame排序sort的问题
2018/06/07 Python
详解pyenv下使用python matplotlib模块的问题解决
2018/11/29 Python
python设定并获取socket超时时间的方法
2019/01/12 Python
基于pytorch的lstm参数使用详解
2020/01/14 Python
tensorflow入门:TFRecordDataset变长数据的batch读取详解
2020/01/20 Python
python实现文法左递归的消除方法
2020/05/22 Python
Python绘制数码晶体管日期
2021/02/19 Python
导出HTML5 Canvas图片并上传服务器功能
2019/08/16 HTML / CSS
什么是属性访问器
2015/10/26 面试题
创联软件面试题笔试题
2012/10/07 面试题
总经理助理的八要求
2013/11/12 职场文书
网站设计师的岗位职责
2013/11/21 职场文书
争先创优公开承诺书
2014/08/30 职场文书
党员干部形式主义个人整改措施
2014/09/17 职场文书