利用js完成a标签禁用，验证码倒计时，及颜色的动态变化

 一、前端添加输入框，并设置验证码按钮为按标签，内置在输入框中

<style>
.container{
    position: relative;
    width: 100%;
    background-color: #f1f1f1;
    padding-right: 0px; 
    padding-left: 0px;
}
.container input{
    width: 100%;
    height: 38px;
}
.container a{
    position: absolute;
    top: 30%;
    right: 5px;
    bottom: 50%;
    margin: auto;
    background-color: #fff;
    border: none;   // 去掉边框
    outline: none;  // 去掉点击按钮后的边框
 }

</style>

<label><font color='red'>*</font>验证码：</label>
<div class="container">
	<input type="text" name="code"  id="code"  placeholder="请输入..." autocomplete="off" class="form-control" >
	<a style="color:green;cursor:pointer;" id="getmessage" >获取验证码</a>
</div>

效果图如下： 

 

二：设置倒计时禁用指定a标签，并改变颜色为灰色

var wat=10;//倒计时10秒
if(hh != '获取验证码'){
    return false;
 }else{
    wat=10;
    $('#getmessage').attr('disabled',true).css("pointer-events","none").css("color","#C0C0C0");//设置禁用颜色
    GetRTime();//调用倒计时计算方法
}
                        
             

效果图 

 

 

三：书写倒计时方法，完成倒计时后启用a标签，并改为绿色 

function GetRTime(){
	if(wat == 0){
		$("#getmessage").html('获取验证码');
		$('#getmessage').attr('disabled','').css("pointer-events","auto").css("color","green");//取消禁用并改变颜色
	}else{
		$("#getmessage").html('重新发送'+wat+'秒');
		wat--;
		setTimeout("GetRTime()",1000);
	}
}