css部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.btn {
border: 1px solid black;
background-color: aliceblue;
}
</style>
</head>
<body>
<input type="text" class="textt" placeholder="请输入验证码">
<button class="btn">点击发送验证码</button>
<button class="qr">确认</button>
<script src="./发送验证码.js"></script>
</body>
</html>
发送验证码部分
var btn = document.querySelector(".btn")
var qr =document.querySelector(".qr")
var timeout = 60
btn.onclick = function() {
time = setInterval(function () {
if (timeout == 0) {
clearInterval(time)
btn.disabled = false
timeout = 60;
btn.innerHTML="请输入验证码"
}
else {
btn.disabled = true
btn.innerHTML="请在"+timeout+"秒后重试"
timeout--;
}
}, 1000)
}
确认验证部分
qr.onclick=function(){
var textt=document.querySelector('.textt').value
if(textt==="0505"){
alert('验证成功')
}else{
alert('验证失败')
}
}