发送验证码倒计时功能

文章主要讲解重置密码功能中，发送短信或者发送发送邮件进行验证是，一般为了防止重复点击，大多数网站在处理是都会在点击发送验证码后，发送按钮有一个倒计时功能，一般默认为60秒，60秒内不允许重复点击发送。

一、制作改功能需要的基本技能级了解知识：

1、熟悉HTML，因为界面基本原属就是HTML组成。

2、数据Javascript、jQuery，jQuery是很好的一个js工具。

3、熟悉CSS样式，这里用到基本的样式来改变html显示效果。

4、熟悉window对象的setTimeout方法和clearTimeout 方法，定时计数会用到。

二、效果目标

最终效果如下图，通过点击“发送验证码”可以实现自动倒计时，同时按钮变灰，失效该按钮的点击事件，计时结束后，按钮状态恢复，点击事件恢复，可继续点击。

最终效果

三、页面效果代码

页面样式使用页面css样式，html使用了html5的一些属性（例如input中的require），这里以核心显示代码为例：

    
用邮箱重置密码
    
    

        
        

            
            
        
        

            
            
            发送验证码
        
        

             
             
        
        

             
             
        
        
    
     返回登录注册

我们重点放在按钮“发送验证码”上，样式和页面目前有了，那么我们怎么来实现页面的倒计时呢？对，就是js，通过js实现数字的变化计时。

var RESET_COUNT = 60;//首先设置默认计时数为60秒。
var countdown = RESET_COUNT;
//定义倒计时处理方法
function settime(obj){
    if(countdown==0){//结束计时
        obj.css("cursor", "pointer");//鼠标小手指针
        obj.css("background","#3194d0");//背景设设置为#3194d0
        $("#reset_pwd").on("click",".js-send-code-button",sendcode);
        obj.html("发送验证码");//复原计时按钮上内容
        countdown = COUNT; 
        return;
    }else{
        obj.css("background","#ddd");//背景色设置为#ddd
        obj.css("cursor", "default");//鼠标箭头指针
        if(countdown==COUNT){
             $("#reset_pwd").off("click",".js-send-code-button");
        }
        obj.html("重新发送(" + countdown + ")");//更新按钮上计时内容
        countdown--; 
    }
    setTimeout(function() { settime(obj) },1000);
}
//定义发送验证发方法
function sendcode(){
      //验证邮箱输入为邮箱后进行发送计时
      var flag = false;
      var email = $.trim($("#email").val());
      var message = "";
      var myreg = /^([\.a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/;  
      if(email ==''){
            message = "邮箱不能为空！";
      }else if(!myreg.test(email)){
            message = "请输入有效的邮箱地址！";
      }else{
            flag = true;
      }
      if(flag){
            settime($(".js-send-code-button"));
            $("#reset_pwd").off("click",".js-send-code-button");//移除“.js-send-code-button”对象上绑定的click事件，使点击无效
            $.ajax{
                  //具体调用发送服务
                  .........略
            }
      }else{
            alert(message);//提示消息
      }
}

对于"发送验证码"按钮，通过jquery注册点击事件，代码如下：

$("#reset_pwd").on("click",".js-send-code-button",sendcode);

OK，代码完成，看下效果吧。
视频地址：优酷视频，点我，点我！！

点击查看视频