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

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

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

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

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

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

二、效果目标

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

最终效果

三、页面效果代码

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

<div class="main">
    <h4 class="reset-title">用邮箱重置密码</h4>
    <!-- 用邮箱重置密码 -->
    <form id="reset_pwd" action="" accept-charset="UTF-8" method="post">
        <input name="utf8" type="hidden" value="utf-8" />
        <div class="input-prepend restyle no-radius">
            <input type="email" name="email" id="email" placeholder="请输入注册或绑定的邮箱" required/>
            <i class="iconfont ic-email"></I>
        </div>
        <div class="input-prepend restyle no-radius security-up-code js-security-number">
            <input type="text" name="email_code" id="email_code" placeholder="邮箱验证码" required/>
            <i class="iconfont ic-verify"></I>
            <a class="btn-in-resend js-send-code-button" href="javascript:void(0);">发送验证码</a>
        </div>
        <div class="input-prepend restyle no-radius">
             <input type="password" name="new_passwd" id="new_passwd" placeholder="请输入新密码" required/>
             <i class="iconfont ic-password"></I>
        </div>
        <div class="input-prepend">
             <input type="password" name="password_confirmation" id="password_confirmation" placeholder="请再输入一遍新密码" required    />
             <i class="iconfont ic-password"></I>
        </div>
        <input type="submit" name="commit" value="重置密码" class="sign-in-button" />
    </form>
    <a class="return" href="login.php"><i class="iconfont ic-back"></i> 返回登录注册</a>
</div>

我们重点放在按钮“发送验证码”上，样式和页面目前有了，那么我们怎么来实现页面的倒计时呢？对，就是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，代码完成，看下效果吧。
视频地址：优酷视频，点我，点我！！

点击查看视频