实现效果:
1:开始效果:
2:点击获取验证码之后:
实现代码如下:
前台代码:
<span class="personattr">手机号:</span>${business.bdMobile}
<input type="button" class="changepass" onclick="getCode(${business.bdMobile})" value="获取验证码" id="J_getCode"/>
<button class="changepass" id="J_resetCode" style="display:none;">
<span id="J_second"></span>秒后获取
</button>
js代码:
//调用生成验证码的接口:
function getCode(phone){
$.ajax({
url:"/BusinessInfo/getRegistCode.html",
type:"post",
dataType:"json",
async:true,
cache:false,
data:{bdMobile:phone},
success:function(obj){
resetCode(); //调用验证码倒计时
}
});
}
//倒计时代码
function resetCode(){
$('#J_getCode').hide();
$('#J_second').html('60');
$('#J_resetCode').show();
var second = 60;//倒计时时间
var timer = null;
timer = setInterval(function(){
second -= 1;
if(second >0 ){
$('#J_second').html(second);
}else{
clearInterval(timer);
$('#J_getCode').show();
$('#J_resetCode').hide();
}
},1000);
}