内容
1.发送按钮点击后,会被禁用;
2.被点击后,按钮里面的内容会变化成1分钟的倒计时;
3.待发送按钮被触发后才可以点击提交按钮,需在验证码框里填写0505,用弹窗提示成功。
原理
倒计时实现60秒倒数
(注:“眼睛”显示密码为浏览器自带!!)
代码
<!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>
<style>
*{
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div>
验证码:
<input type="password" class="password">
<button class="send">发送</button>
<input type="submit" class="get">
</div>
<script>
var passWord = document.querySelector('.password')
var osend = document.querySelector('button')
var oget = document.querySelector('.get')
var time = 60;
oget.disabled = true
osend.addEventListener('click', function(){
osend.disabled = true
var oTime = setInterval(function(){
if(time == 0){
clearInterval(oTime)
osend.disabled = false
osend.innerHTML = '发送'
}else{
osend.innerHTML = '等待' + time + '秒'
time--
oget.disabled = true
}
}, 1000)
})
oget.addEventListener('click', function() {
if(passWord.value=='0505'){
alert("成功")
}else{
alert("错误")
}
})
</script>
</body>
</html>
效果