点击按钮变灰并开始倒计时60秒

点击按钮并开始倒计时,结束后按钮恢复

1. 给按钮绑定一个点击事件

<input type="button" value="获取验证码" id="searchButton" onclick="sendEmail()" /><br/>

2. 先设置一个初始的时间值，这个值决定你的按钮每过多少秒恢复`

var time =60;
function sendEmail(){

3. 随后进行判断,若time==0则表示当前的按钮计时完毕,需要将按钮恢复,并且重新赋值,若!=0则表明当前正在计时，按钮禁用，并且时间time-1

function sendEmail(){
   if(time==0){//重新获取验证码
    $("#searchButton").attr("disabled",false);
    $("#searchButton").val("点击发送验证码");
    time = 60;
    return false;//清除定时器
   }else{
    $("#searchButton").attr("disabled",true);
    $("#searchButton").val("重新发送("+time+")");
    time--;
   }
   //设置一个定时器
   setTimeout(function(){
    sendEmail()     
   },1000)
  }

4. 这里设置一个计时器,依靠计时器来完成时间的倒数,这里setTimeout函数中包含了两个参数,一个是每隔多久时间后就调用的方法,另一个参数表示的是间隔时间

   //设置一个定时器
   setTimeout(function(){
    sendEmail()     
   },1000)
 

这里需要注意的一点是return false;//清除定时器
这里的return的作用是清除计时器，不然的话计时器会一直循环调用