效果圖
132.gif
代碼
html
<span class="sendcode"><input id="sendcode" type="button" class="btn btn-default" value="獲取驗(yàn)證碼"/></span>
js
var phoneReg = /(^1[3|4|5|7|8]\d{9}$)|(^09\d{8}$)/; //手機(jī)號正則
var count = 60; //間隔函數(shù)，1秒執(zhí)行
var InterValObj1; //timer變量，控制時間
var curCount1; //當(dāng)前剩余秒數(shù)
function sendMessage1() {
curCount1 = count;
var phone = $.trim($('#tel').val());
if(!phoneReg.test(phone)) {
alert(" 請輸入有效的手機(jī)號碼");
return false;
}
console.log('-------')
//設(shè)置button效果，開始計(jì)時
$("#sendcode").attr("disabled", "true");
console.log($("#sendcode").val(+curCount1 + "秒再獲取"))
$("#sendcode").val(+curCount1 + "秒再獲取");
InterValObj1 = window.setInterval(SetRemainTime1, 1000); //啟動計(jì)時器缩搅，1秒執(zhí)行一次
//向后臺發(fā)送處理數(shù)據(jù)
}
function SetRemainTime1() {
console.log('倒計(jì)時')
if(curCount1 == 0) {
window.clearInterval(InterValObj1); //停止計(jì)時器
$("#sendcode").removeAttr("disabled"); //啟用按鈕
$("#sendcode").val("重新發(fā)送");
} else {
curCount1--;
$("#sendcode").val(+curCount1 + "秒再獲取");
}
}
