html代碼
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="jquery.min.js"></script> </head> <body> 手機號：<input id="mobile" type="text" name="mobile" value=""> <input id="btnSendCode" type="button" value="發送驗證碼" onclick="sendMessage()" /><br> 驗證碼：<input id="code" type="text" name="mobile" value=""> </body> </html>
js代碼
<script>
var timeController; //timer變量，控制時間
var count = 5; //間隔函數，1秒執行
var remainCount;//當前剩余秒數
function sendMessage() {
remainCount = count;
//設置button效果，開始計時
$("#btnSendCode").attr("disabled", "true");
$("#btnSendCode").val("請在" + remainCount + "秒內輸入驗證碼");//加上這一句不會出現延遲，否則倒計時延遲1s
timeController = setInterval("SetRemainTime()", 1000); //啟動計時器，1秒執行一次
//向后台發送處理數據
var mobile = document.getElementById("mobile").value;
$.ajax({
type: "POST", //用POST方式傳輸
url: 'f.php', //目標地址.
dataType: "json", //數據格式:JSON
//data: "dealType=" + dealType +"&uid=" + uid + "&code=" + code,
data: "&a="+mobile,
success: function(json){
document.getElementById("code").value=json.code;
}
});
}
//timer處理函數
function SetRemainTime() {
if (remainCount==0) {
clearInterval(timeController);//停止計時器
$("#btnSendCode").removeAttr("disabled");//啟用按鈕
$("#btnSendCode").val("重新發送驗證碼");
}
else {
remainCount--;
$("#btnSendCode").val("請在" + remainCount + "秒內輸入驗證碼");
}
}
</script>
后台文件（f.php）
<?php sleep(5); echo json_encode(array('code'=>mt_rand(1000,9999))); ?>
效果
