需求
1.发送按钮点击后,会被禁用
2.被点击后,按钮里面的内容会变化成1分钟的倒计时3待发送按钮被触发后才可以点击提交按钮,需在验证码框里填写0505,用弹窗提示成功。
原理
onclick事件和函数配合
里面添加计时器
获取文本框内容并判断
if()中判断的为字符串所以加""
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="text" name="" id="input"><button id="btn1">发送</button>
<br>
<button type="submit" id="btn2" disabled>提交</button>
<script>
var btn1 = document.getElementById("btn1")
var btn2 = document.getElementById("btn2");
btn1.onclick = function(){
btn1.disabled=true;//当点击后倒计时时候不能点击此按钮
btn2.disabled=false;//当点击后倒计时时候能点击此按钮
var time = 60;//倒计时60秒
var timer = setInterval(fun1,1000);//设置定时器
function fun1(){
time--;
if(time>=0){
btn1.innerHTML = time + "s后重新发送";
}
else{
btn1.innerHTML = "重新发送验证码";
btn1.disabled = false;//倒计时结束能够重新点击发送的按钮
clearTimeout(timer);
time = 60;
}
}
}
btn2.onclick = function(){
var text = document.getElementById("input").value;//获取文本框内容
console.log(text)
if(text == "0505"){
alert("YES");
}
else{
alert("NO");
}
}
</script>
</body>
</html>
效果