文章主要讲解重置密码功能中，发送短信或者发送发送邮件进行验证是，一般为了防止重复点击，大多数网站在处理是都会在点击发送验证码后，发送按钮有一个倒计时功能，一般默认为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，代码完成，看下效果吧。
视频地址：优酷视频，点我，点我！！
点击查看视频
