前端展示效果:
代碼:
<input type="text" id="telephone" value="" name="telephone" placeholder="手機号" />
<input type="text" value="" name="checkCode" placeholder="請輸入驗證碼" />
<input type="button" onclick="sendCode(this)" value="擷取驗證碼">
//倒計時時間
var time = 10;
//定時器id,用于結束定時器
var intervalID;
//按鈕對象
var bo;
//參數:擷取驗證碼按鈕對象
function sendCode(buttonObj) {
//校驗手機号格式是否正确
//1 定義正則對象
var regExp = new RegExp("^((13[0-9])|(14[5|7])|(15([0-3]|[5-9]))|(18[0,5-9]))\\d{8}$", "g");
//2 校驗
if(!regExp.test($("#telephone").val())) {
//失敗=>提示請輸入正确的手機号
layer.msg("請輸入正确的手機号");
return;
}
//------------------------------------------------------------------
//ajax請求背景發送手機驗證碼短信 url:向背景發送請求連結
$.post(url, {
telephone: $("#telephone").val()
});
//------------------------------------------------------------------
bo = buttonObj;
//1.點選按鈕後,按鈕變灰(禁用).并改變按鈕上的文字為60秒後重新發送
bo.disabled = true;
bo.value = time + "秒後重新發送";
//2.設定一個js定時器,每隔一秒觸發一次方法
intervalID = setInterval(timeCount, 1000);
}
function timeCount() {
time = time - 1; //讓秒數減一.
//3.書寫觸發的方法:
//判斷秒數是否大于0
if(time > 0) {
//大于0 = 更新按鈕上的文字
bo.value = time + "秒後重新發送";
} else {
//等于0 = 按鈕恢複可以點狀态,按鈕上文字重新變為"擷取驗證碼"
bo.disabled = false;
bo.value = "擷取驗證碼";
time = 10;
//停掉定時器
clearInterval(intervalID);
}
}