javascript发送短信验证码实现代码

 更新时间:2015年11月12日 09:46:49   投稿:lijiao  
我们在注册账号,或者是参加活动时,都会向手机发送收短信验证码,短信验证码到底是如何实现的,本文为大家揭晓,并为大家分项1javascript发送短信验证码实现代码,感兴趣的小伙伴们可以参考一下

本文首先分析手机发送验证码的原理,再对javascript发送短信验证码予以实现,具体思路如下:
实现点击“发送验证码”按钮后,按钮依次显示为“59秒后重试”、“58秒后重试”…直至倒计时至0秒时再恢复显示为“发送验证码”。在倒计时期间按钮为禁用状态 .

第一步、获取按钮、绑定事件、设置定时器变量和计时变量

第二步、添加定时器,每隔1秒钟计时减 1,直至当计时小于等于 0 时清除定时器,按钮恢复为“发送验证码”,否则显示为“X秒后重试”

效果图:

实现代码:

<!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发送短信验证码全部代码,希望对大家的学习有所帮助。

相关文章

  • 利用JS判断字符串是否含有数字与特殊字符的方法小结

    利用JS判断字符串是否含有数字与特殊字符的方法小结

    在我们日常工作的时候,利用javaScript判断一个字符串中是否包括有数字和"-",在一些表单提交的地方,这是比较有用的常规判断,这里收集有几种不同的方法,最后还将简要介绍下isNAN函数的使用方法和例子,有需要的朋友们可以参考借鉴,下面来一起看看吧。
    2016-11-11
  • JS实现返回上一页并刷新页面的方法分析

    JS实现返回上一页并刷新页面的方法分析

    这篇文章主要介绍了JS实现返回上一页并刷新页面的方法,结合实例形式分析了javascript针对移动端、PC端浏览器的页面缓存刷新相关操作技巧,需要的朋友可以参考下
    2019-07-07
  • js事件驱动机制 浏览器兼容处理方法

    js事件驱动机制 浏览器兼容处理方法

    下面小编就为大家带来一篇js事件驱动机制 浏览器兼容处理方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-07-07
  • Bootstrap 过渡效果Transition 模态框(Modal)

    Bootstrap 过渡效果Transition 模态框(Modal)

    这篇文章主要介绍了Bootstrap 过渡效果Transition 模态框(Modal),非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2017-03-03
  • 比较详细的javascript DOM 学习笔记

    比较详细的javascript DOM 学习笔记

    看了很多的js dom学习资料,发现这个比较详细,特转载给大家学习一下
    2008-06-06
  • javascript 动态生成css代码的两种方法

    javascript 动态生成css代码的两种方法

    这篇文章主要介绍了javascript 动态生成css代码的两种方法,有时候我们需要利用js来动态生成页面上style标签中的css代码,下面就给大家介绍两种方法,需要的朋友可以参考下
    2017-03-03
  • Bootstrap输入框组件使用详解

    Bootstrap输入框组件使用详解

    这篇文章主要为大家详细介绍了Bootstrap输入框组件的使用方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-06-06
  • 详谈js中window.location.search的用法和作用

    详谈js中window.location.search的用法和作用

    下面小编就为大家带来一篇详谈js中window.location.search的用法和作用。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-02-02
  • ES7之Async/await的使用详解

    ES7之Async/await的使用详解

    这篇文章主要介绍了ES7之Async/await的使用,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-03-03
  • JavaScript实现弹出DIV层同时页面背景渐变成半透明效果

    JavaScript实现弹出DIV层同时页面背景渐变成半透明效果

    这篇文章主要介绍了JavaScript实现弹出DIV层同时页面背景渐变成半透明效果,涉及JavaScript弹出窗口的实现及页面元素属性动态变换的相关技巧,需要的朋友可以参考下
    2016-03-03

最新评论