html web前端，点击发送验证码，按钮60秒倒计时
eaca39b57a49d39f6c9e2f49f2559e9a.jpg
<!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; // 间隔函数，1秒执行
var InterVal; // timer变量，控制时间
function SetTime() {
if (curCount == 0) {
window.clearInterval(InterVal); //停止计时器
btnSendCode.removeAttribute("disabled"); //启用按钮
btnSendCode.value = "重新发送";
} 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秒执行一次
//
//创建XMLHttpRequest对象,新版本的浏览器可以直接创建XMLHttpRequest对象,IE5或IE6没有
var request = new XMLHttpRequest();
// 设置请求方法与路径
request.open("get", 'https://api.wzyanche.com/sms/SendSms/' + phoneDom.value);
// 不发送数据到服务器
request.send(null);
// XHR对象获取到返回信息后执行
request.onload = function() {
// 解析获取到的数据
var data = JSON.parse(request.responseText);
console.log('111 000 返回的数据', data)
console.log('111 111 返回的数据', data.retMsg)
}
}
</script>
</html>
