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 相关文章推荐
脚本吧 - 幻宇工作室用到js,超强推荐expand.js
Dec 23 Javascript
jQuery LigerUI 使用教程表格篇(1)
Jan 18 Javascript
了解一点js的Eval函数
Jul 26 Javascript
Javascript Ajax异步读取RSS文档具体实现
Dec 12 Javascript
javascript实现全局匹配并替换的方法
Apr 27 Javascript
深入理解JavaScript中为什么string可以拥有方法
May 24 Javascript
js将滚动条滚动到指定位置的简单实现方法
Jun 25 Javascript
Vue生命周期示例详解
Apr 12 Javascript
原生js轮播特效
May 18 Javascript
javascript实现Java中的Map对象功能的实例详解
Aug 21 Javascript
vue实现的组件兄弟间通信功能示例
Dec 04 Javascript
vue项目打包后提交到git上为什么没有dist这个文件的解决方法
Sep 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
PHP分页显示制作详细讲解
2008/11/19 PHP
php中将数组存到文件里的实现代码
2012/01/19 PHP
解析PHP正则提取或替换img标记属性
2013/06/26 PHP
ThinkPHP模板比较标签用法详解
2014/06/30 PHP
php利用scws实现mysql全文搜索功能的方法
2014/12/25 PHP
Yii视图CGridView列表用法实例分析
2016/07/12 PHP
浅谈PHP中的Trait使用方法
2019/03/22 PHP
jquery 多行文本框(textarea)高度变化
2013/07/03 Javascript
jQuery的css()方法用法实例
2014/12/24 Javascript
chrome调试javascript详解
2015/10/21 Javascript
javascript字符串替换函数如何一次性全部替换掉
2015/10/30 Javascript
JavaScript判断图片是否已经加载完毕的方法汇总
2016/02/05 Javascript
图文详解Heap Sort堆排序算法及JavaScript的代码实现
2016/05/04 Javascript
js遍历json的key和value的实例
2017/01/22 Javascript
浅谈Vue父子组件和非父子组件传值问题
2017/08/22 Javascript
localstorage实现带过期时间的缓存功能
2019/06/28 Javascript
vue实现简单加法计算器
2020/10/22 Javascript
解决vue项目打包上服务器显示404错误,本地没出错的问题
2020/11/03 Javascript
python用装饰器自动注册Tornado路由详解
2017/02/14 Python
windows下安装Python和pip终极图文教程
2017/03/05 Python
tensorflow 中对数组元素的操作方法
2018/07/27 Python
Numpy的简单用法小结
2019/08/28 Python
window环境pip切换国内源(pip安装异常缓慢的问题)
2019/12/31 Python
python中return不返回值的问题解析
2020/07/22 Python
集世界奢侈品和设计师品牌的意大利精品买手店:Tessabit
2019/08/17 全球购物
美国隐形眼镜网上商店:Lens.com
2019/09/03 全球购物
垃圾回收的优点和原理。并考虑2种回收机制
2016/10/16 面试题
理工科学生的自我评价
2013/12/15 职场文书
新闻发布会主持词
2014/03/28 职场文书
社区春季防火方案
2014/06/02 职场文书
校园广播稿100字
2014/10/06 职场文书
《小摄影师》教学反思
2016/02/18 职场文书
详解CSS中的特指度和层叠问题
2021/07/15 HTML / CSS
MYSQL 运算符总结
2021/11/11 MySQL
SpringBoot详解整合Redis缓存方法
2022/07/15 Java/Android
详解SQL报错盲注
2022/07/23 SQL Server