效果要求:
1.发送按钮点击后,会被禁用;
2.被点击后,按钮里面的内容会变化成1分钟的倒计时;
3.待发送按钮被触发后才可以点击提交按钮,需在验证码框里填写0505,用弹窗提示成功。
实现原理:
给表单设置disabled
属性,使其一开始无法点击
给对应元素设置单击响应函数,绑定单击响应函数之后,该按钮不可点击,并且变成60s的倒计时,并且对应表单的disabeled
属性值变为flase
,使其可以点击
用setInterval
计时器控制60s的倒计时
并且在倒计时结束的时候清除计时器
代码展示:
html
<!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>
<link rel="stylesheet" href="./index.css">
</head>
<body>
<div class="box">
<form action="">
<p>验证码</p><input type="text" id="yzm" placeholder="请输入验证码">
<input type="button" value="发送" id="fs">
<input type="button" value="提交" id="tj" disabled>
</form>
</div>
<script src="./index.js"></script>
</body>
</html>
css
*{
margin: 0;
padding: 0;
}
.box{
margin: 0 auto;
margin-top: 30px;
padding-top: 20px;
width: 300px;
height: 70px;
background-color: pink;
border: 1px solid black;
border-radius: 10px;
display: flex;
justify-content: center;
position: relative;
}
.box p{
display:inline-block;
width: 70px;
text-align:center;
}
#yzm{
height: 25px;
outline: none;
}
#fs{
height: 25px;
}
#tj{
float: right;
height: 25px;
position:absolute;
top: 55px;
right: 13px;
}
js
//获取节点
var fs = document.getElementById("fs")
var tj = document.getElementById("tj")
var wc = 0
//给发送按钮绑定单击响应函数
fs.onclick = function(){
tj.disabled = false
fs.disabled = true
fs.value = 60+"s"
//创建60s倒计时的计时器
var i = 59
var fsTime = setInterval(function(){
fs.value = i+"s"
i--
if(i == 0){
clearInterval(fsTime)
fs.disabled = false
fs.value = "发送"
}
if(wc){
clearInterval(fsTime)
fs.value = "发送"
}
},1000)
}
//为提交按钮绑定单击响应函数
tj.onclick = function(){
if(!(yzm.value == "0505")){
alert("请输入正确的验证码")
}else{
alert("提交成功")
fs.value = "发送"
wc = 1
}
}
效果展示:
发送验证码