一.html部分
<div class="f21">获取验证码</div>
二.css部分 //不要忘记引入自己写的css
.f21{
height: 36px;
line-height: 35px;
width: 125px;
margin-right: 55px;
margin-top: 20px;
background-color: #e5e5e5;
font-size: 15px;
border: 1px solid #e5e5e5;
text-align: center;
color: #c7000b;
}
三. js部分 //引入js库 及自己写的js
var timer="";
var nums=60;
var validCode=true;//定义该变量是为了处理后面的重复点击事件
$(".f21").on('click',function(){
console.log("111");
var code=$(this);
if(validCode){
validCode=false;
timer=setInterval(function(){
if(nums>0){
nums--;
code.text(nums+"秒后重新发送");
code.addClass("gray-bg");
}
else{
clearInterval(timer);
nums=60;//重置回去
validCode=true;
code.removeClass("gray-bg");
code.text("发送验证码");
}
},1000)
}
})