用js写一个短信验证码60秒的倒计时完整版
时间: 2023-06-07 08:08:44 浏览: 70
好的,以下是用JS写一个短信验证码60秒的倒计时完整版的代码实现:
HTML 代码部分:
```
<input type="text" id="mobile" placeholder="请输入手机号码">
<button id="sendCodeBtn" onclick="sendCode();">获取验证码</button>
```
JS 代码部分:
```
var wait = 60;
function sendCode(){
var mobile = document.getElementById("mobile").value;
if(!/^\d{11}$/.test(mobile)){
alert("请输入11位手机号码!");
return false;
}
document.getElementById("sendCodeBtn").disabled=true;
document.getElementById("sendCodeBtn").style.backgroundColor="#B6B6B6";
document.getElementById("sendCodeBtn").innerHTML= wait + "秒后重新发送";
var timer = setInterval(function(){
if(wait == 0){
clearInterval(timer);
document.getElementById("sendCodeBtn").innerHTML="获取验证码";
document.getElementById("sendCodeBtn").disabled=false;
document.getElementById("sendCodeBtn").style.backgroundColor="#3CA4FF";
wait = 60;
}
else{
wait--;
document.getElementById("sendCodeBtn").innerHTML= wait + "秒后重新发送";
}
}, 1000);
}
```
这段代码实现了基本的手机号码验证和60秒倒计时的功能,在用户点击获取验证码按钮后会启动计时器,并将发送短信验证码的按钮进行禁用,当计时器归零时会自动开启发送短信验证码按钮。