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 相关文章推荐
在页面上点击任一链接时触发一个事件的代码
Apr 07 Javascript
setInterval与clearInterval的使用示例代码
Jan 28 Javascript
javascript实现链接单选效果的方法
May 13 Javascript
Ext JS框架程序中阻止键盘触发回退或者刷新页面的代码分享
Jun 07 Javascript
javascript的replace方法结合正则使用实例总结
Jun 16 Javascript
整理关于Bootstrap警示框的慕课笔记
Mar 29 Javascript
基于js文件加载优化(详解)
Jan 03 Javascript
浅析java线程中断的办法
Jul 29 Javascript
vue监听对象及对象属性问题
Aug 20 Javascript
浅谈React之状态(State)
Sep 19 Javascript
使用JQuery自动完成插件Auto Complete详解
Jun 18 jQuery
教你搭建按需加载的Vue组件库(小结)
Jul 29 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处理postfix邮件内容的方法
2015/06/16 PHP
PHP常见错误提示含义解释(实用!值得收藏)
2016/04/25 PHP
php修改数组键名的方法示例
2017/04/15 PHP
JScript中的&quot;this&quot;关键字使用方式补充材料
2007/03/08 Javascript
JavaScript 判断判断某个对象是Object还是一个Array
2010/01/28 Javascript
jquery实现文本框鼠标右击无效以及不能输入的代码
2010/11/05 Javascript
Javascript 中的 call 和 apply使用介绍
2012/02/22 Javascript
javascript中如何处理引号编码&amp;#034;
2013/08/15 Javascript
angularJS 中input示例分享
2015/02/09 Javascript
JS两个数组比较,删除重复值的巧妙方法(推荐)
2016/06/03 Javascript
AngularJS入门教程之REST和定制服务详解
2016/08/19 Javascript
分享JavaScript监听全部Ajax请求事件的方法
2016/08/28 Javascript
详解Vue.js中.native修饰符
2018/04/24 Javascript
基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件功能
2021/02/23 Vue.js
[54:17]DOTA2-DPC中国联赛定级赛 RNG vs iG BO3第二场 1月10日
2021/03/11 DOTA
深入讲解Python中的迭代器和生成器
2015/10/26 Python
Python自动化测试Eclipse+Pydev 搭建开发环境
2016/08/15 Python
利用Tkinter和matplotlib两种方式画饼状图的实例
2017/11/06 Python
浅谈Python type的使用
2019/11/19 Python
关于python中plt.hist参数的使用详解
2019/11/28 Python
用python解压分析jar包实例
2020/01/16 Python
python利用xpath爬取网上数据并存储到django模型中
2021/02/26 Python
AC Lens:购买隐形眼镜
2017/02/26 全球购物
Kathmandu澳洲户外商店:新西兰户外运动品牌
2017/11/12 全球购物
世界上获奖最多的手机镜头:Olloclip
2018/03/03 全球购物
阿根廷票务网站:StubHub阿根廷
2018/04/13 全球购物
what is the difference between ext2 and ext3
2015/08/25 面试题
美术教学感言
2014/02/22 职场文书
会计系毕业生求职信
2014/05/28 职场文书
公务员党员评议表自我鉴定
2014/09/14 职场文书
网站出售协议书范文
2014/10/10 职场文书
2014年班级工作总结
2014/11/14 职场文书
社区端午节活动总结
2015/02/11 职场文书
给男朋友的道歉短信
2015/05/12 职场文书
公司费用报销管理制度
2015/08/04 职场文书
学习型家庭事迹材料(2016精选版)
2016/02/29 职场文书