html web前端，點擊發(fā)送驗證碼，按鈕60秒倒計時
文章來源：http://www.zghlxwxcb.cn/news/detail-720969.html
eaca39b57a49d39f6c9e2f49f2559e9a.jpg文章來源地址http://www.zghlxwxcb.cn/news/detail-720969.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
</head>
<body>
<div>
<div style="margin: 15px;">
<input id="phone" type="text" autocomplete="off" placeholder="請輸入手機號" />
<input id="btnSendCode" type="button" value="獲取驗證碼" onClick="sendMessage()" />
</div>
</div>
</body>
<script type="text/javascript">
var phoneDom = document.querySelector('#phone');
var btnSendCode = document.querySelector("#btnSendCode");
var count = 60; // 間隔函數(shù)，1秒執(zhí)行
var InterVal; // timer變量，控制時間
function SetTime() {
if (curCount == 0) {
window.clearInterval(InterVal); //停止計時器
btnSendCode.removeAttribute("disabled"); //啟用按鈕
btnSendCode.value = "重新發(fā)送";
} else {
curCount--;
btnSendCode.value = curCount + "秒再獲取";
}
}
function sendMessage() {
//
// // 手機號碼校驗
// var phone = (phoneDom.value).trim();
// var phoneReg = /(^1[3|4|5|7|8]\d{9}$)|(^09\d{8}$)/; //手機號正則
// if (!phoneReg.test(phone)) {
// alert(" 請輸入有效的手機號碼");
// return false;
// }
//
// 按鈕點擊倒計時，限制點擊
curCount = count;
//設置button效果，開始計時
btnSendCode.setAttribute("disabled", "true");
btnSendCode.value = curCount + "秒再獲取";
InterVal = window.setInterval(SetTime, 1000); //啟動計時器，1秒執(zhí)行一次
//
//創(chuàng)建XMLHttpRequest對象,新版本的瀏覽器可以直接創(chuàng)建XMLHttpRequest對象,IE5或IE6沒有
var request = new XMLHttpRequest();
// 設置請求方法與路徑
request.open("get", 'https://api.wzyanche.com/sms/SendSms/' + phoneDom.value);
// 不發(fā)送數(shù)據(jù)到服務器
request.send(null);
// XHR對象獲取到返回信息后執(zhí)行
request.onload = function() {
// 解析獲取到的數(shù)據(jù)
var data = JSON.parse(request.responseText);
console.log('111 000 返回的數(shù)據(jù)', data)
console.log('111 111 返回的數(shù)據(jù)', data.retMsg)
}
}
</script>
</html>到了這里，關于html web前端，點擊發(fā)送驗證碼，按鈕60秒倒計時的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！
