短信验证码倒计时

       此功能要实现点击“获取验证码”按钮后，开始进行倒计时，一分钟后才能重新发送，除了让按钮样式发生变化外，还要保证，在点击后再重复点击时不能让后台接收到点击事件，也就是说让点击按钮失效。

      下面为具体的代码实现过程，（此代码中使用了AUI框架，只影响样式，不会对功能造成影响。此处提供AUI官网地址：http://www.auicss.com/）

       HTML代码：

<li class="aui-list-item">
    <div class="aui-list-item-inner">
	<div class="aui-list-item-label">
	   验证码
	</div>
	<div class="aui-list-item-input">
	   <input type="text" name="phonenumber" id="code" placeholder="请输入验证码" onblur="judgeTel()">
	   <p>
              <button type="button" class="aui-btn aui-btn-primary" id="getCode" onclick="time()">获取验证码</button>
           </p>
	</div>
   </div>
</li>

CSS代码：

#code{
    float: left;
    width: 55%;
}
#getCode{
    float: right;
    border: 0;
    margin-top: 5px;
    margin-right: 5px;
}

JS代码：

var btnDisable = false;//定义全局变量
function time(){false为false时才执行下面的函数
    if(btnDisable){
	return;
    }			
   timeWait(60);
   btnDisable = true;
}//此函数保证在倒计时时，点击按钮不会重新进行倒计时。

function timeWait(time){
    setTimeout(function(){
	if(time>=0){
	    $("#getCode").attr("disabled","disabled");//按钮禁用
	    $("#getCode").removeClass("aui-btn-primary");//改变按钮的样式
	    $("#getCode").text(time+"s后重试");//改变按钮上的文本
	    time--;
	    timeWait(time);
	}
	 else{
	    $("#getCode").text("获取验证码");//改变按钮上的文本
	    $("#getCode").attr("disabled","false"); //按钮启用
	    $("#getCode").addClass("aui-btn-primary");//改变按钮的样式
	    btnDisable = false;
	 }
    },1000);//每隔一分钟执行一次此函数
}

效果示意图：：：

 

 

 

 本人为JS实习生一枚，入坑前端。不断学习，不断进步。欢迎各位前辈批评指教。