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("发送失败，请刷新重试")    //输出提示框
            }
        }
            

代码效果如下

验证码