JS实现验证码的改正与输入
实现倒计时的可视化与验证码的比对
html与css样式
这里为了利于理解,style样式直接在标签里面进行设置
<button style="position: relative;left: 40%;top: 30px;width: 130px;height: 80px;font-size: larger; text-align: center; display: inline;" id="btn1">发送</button>
// 将第一个标签的id名设置为btn1,以此推类,链接JS部分
<button style="position: relative;left: 40%;top: 30px;width: 130px;height: 80px;font-size: larger; text-align: center; display: none;" id="btn2">错误,请重新发送</button>
<button style="position: relative;left: 40%;top: 30px;width: 130px;height: 80px;font-size: larger; text-align: center; display: none;" id="btn3"><input id="put" style="width: 80px;" placeholder="请输入验证码" type="text"></button>
<button style="position: relative;left: 40%;top: 30px;width: 130px;height: 80px;font-size: larger; text-align: center; display: none;" id="btn4">发送</button>
JS样式
document.querySelector('#btn1').addEventListener('click',clicked) //给btn1链接JS的路径(给他添加点击事件)
let btn2 = document.getElementById('btn2')
var x // 定义一个x作为中间量
function clicked(e){ // 点击事件产生执行下面代码
btn1.style.display = 'none' // 让btn1消失
btn2.style.display = 'inline' // 让btn2出现
var tim = 10
setInterval(function(){
btn2.innerHTML = tim
tim = tim -1
},1000) // 这是定时器的显示部分,每一秒都会改变
setTimeout(function(){
btn2.style.display = 'none'
btn3.style.display = 'inline'
btn4.style.display = 'inline'
},10000) // 十秒之后执行事件,也可以改成六十秒或者更久
}
let btn4 =document.getElementById('btn4')
document.querySelector('#btn4').addEventListener('click',clicked2) //给四号标签添加点击事件,点击即产生提交
function clicked2(){ //函数:二号点击事件
var m = document.getElementById("put")
var x = m.value //获取输入框的值
console.log(x) //控制台检查,可有可无
if(x == "0505"){ //验证码比对
alert("发送成功")
}else{
alert("发送失败,请刷新重试") //输出提示框
}
}
代码效果如下
验证码