发送验证码

银色-

于 2023-01-14 15:36:32 发布

阅读量565

点赞数

文章标签： javascript 前端 css

本文链接：https://blog.csdn.net/qq_72238093/article/details/128683989

版权

需求：
1.发送按钮点击后，会被禁用；
2.被点击后，按钮里面的内容会变化成1分钟的倒计时；
3.待发送按钮被触发后才可以点击提交按钮，需在验证码框里填写0505，用弹窗提示成功。

实现原理：
html部分：两个按钮和一个文本框
在这里插入图片描述
css部分：设置颜色

js部分：判断文本框的值是不是0505输出提示框是否成功。通过绑定点击事件使两个按钮交换禁用，再使用计时器60s倒计时。

完整代码：

<!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>
    <style> 
        button{
            background-color: aquamarine;
            border: 1px solid aquamarine;
            border-radius: 20%;
        }
        #put1{
            background-color: aquamarine;
            border: 1px solid aquamarine;
            border-radius: 20%;
        }
    </style>
</head>
<body>
   <input type="text" id="text1">
    <button id="send">发送</button>
    <input type="button" value="提交" id="put1" disabled>
    <script>
        var put1=document.getElementById("put1")
        var send=document.getElementById("send")
        var i=60;   
        var text1=document.getElementById("text1")
        put1.onclick=function(){
            var txt1=text1.value
            if(txt1=="0505"){
                alert("成功")
            }else{
                alert("错误")
            }
        }
        send.onclick=function(){
            send.setAttribute("disabled","true");
            put1.removeAttribute("disabled");
            var timer=setInterval(function(){
                if(i!=0){
                    i--
                send.innerHTML=i
                 
                }else{
                    send.innerHTML="发送"
                    clearInterval(timer)
                }
            },1000)    
        }
    </script>
</body>
</html>