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 相关文章推荐
Jquery调用webService远程访问出错的解决方法
May 21 Javascript
前端开发必须知道的JS之原型和继承
Jul 06 Javascript
使用JavaScript检测Firefox浏览器是否启用了Firebug的代码
Dec 28 Javascript
原生js实现复制对象、扩展对象 类似jquery中的extend()方法
Aug 30 Javascript
JavaScript中计算网页中某个元素的位置
Jun 10 Javascript
基于jQuery实现的旋转彩圈实例
Jun 26 Javascript
jQuery中attr()与prop()函数用法实例详解(附用法区别)
Dec 29 Javascript
canvas 弹幕效果(实例分享)
Jan 11 Javascript
详解VUE 定义全局变量的几种实现方式
Jun 01 Javascript
jQuery.Form实现Ajax上传文件同时设置headers的方法
Jun 26 jQuery
JavaScript递归函数定义与用法实例分析
Jan 24 Javascript
微信小程序云开发之模拟后台增删改查
May 16 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
Nginx下配置codeigniter框架方法
2015/04/07 PHP
User Scripts: Video Download by User Scripts
2007/05/14 Javascript
JavaScript的9个陷阱及评点分析
2008/05/16 Javascript
ie下$.getJSON出现问题的解决方法
2014/02/12 Javascript
Javascript毫秒数用法实例
2015/02/05 Javascript
AngularJS快速入门
2015/04/02 Javascript
快速掌握Node.js事件驱动模型
2016/03/21 Javascript
Angular页面间切换及传值的4种方法
2016/11/04 Javascript
原生JS实现在线问卷调查投票特效
2017/01/03 Javascript
svg动画之动态描边效果
2017/02/22 Javascript
jQuery插件zTree实现获取当前选中节点在同级节点中序号的方法
2017/03/08 Javascript
express+mockjs实现模拟后台数据发送功能
2018/01/07 Javascript
如何利用@angular/cli V6.0直接开发PWA应用详解
2018/05/06 Javascript
Vue Element 分组+多选+可搜索Select选择器实现示例
2018/07/23 Javascript
vue 中滚动条始终定位在底部的方法
2018/09/03 Javascript
在pycharm中开发vue的方法步骤
2020/03/04 Javascript
VUE使用axios调用后台API接口的方法
2020/08/03 Javascript
基于JQuery和DWR实现异步数据传递
2020/10/16 jQuery
深入解答关于Python的11道基本面试题
2017/04/01 Python
详解python中的文件与目录操作
2017/07/11 Python
对Pandas DataFrame缺失值的查找与填充示例讲解
2018/11/06 Python
解决Pycharm调用Turtle时 窗口一闪而过的问题
2019/02/16 Python
python实现Excel文件转换为TXT文件
2019/04/28 Python
在Python中COM口的调用方法
2019/07/03 Python
Spring Cloud Feign高级应用实例详解
2019/12/10 Python
python爬虫实例之获取动漫截图
2020/05/31 Python
基于pycharm实现批量修改变量名
2020/06/02 Python
英国著名的小众美容品牌网站:Alyaka
2017/08/08 全球购物
进步之星获奖感言
2014/02/22 职场文书
节能宣传周活动总结
2014/05/08 职场文书
工作态度不端正检讨书
2014/10/04 职场文书
2014收银员工作总结范文
2014/12/16 职场文书
个人培训总结
2015/03/05 职场文书
安全温馨提示语大全
2015/07/14 职场文书
MySQL 角色(role)功能介绍
2021/04/24 MySQL
Python中使用ipython的详细教程
2021/06/22 Python