发送验证码

三池丶

已于 2023-01-12 15:45:22 修改

阅读量237

点赞数

文章标签： javascript 前端 html

于 2023-01-12 15:27:15 首次发布

本文链接：https://blog.csdn.net/qq_72343101/article/details/128660157

版权

html和css：没什么好说的
js：通过点击事件来实现button的无法选中，通过计时器来实现无法选中时数字的动态效果，当计时器参数小于1时，移除计时器，使button按钮又可以被选中，同时，通过给提交按钮添加点击事件，让按钮获取到input的value值，进而判断input内的信息，给出提示

<!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>

        body{
            position: relative;
        }
    </style>
</head>
<body>
    <input type="text" id="ipt"  value="">
    <button id="btn1">发送验证码</button>
    <button id="submit" disabled>提交</button>
    <script>
        var otime=60//计时器参数
        //绑定按钮
        var obtn=document.querySelector("#btn1")
        var osubmit=document.querySelector("#submit")
        // obtn.removeAttribute('disabled')
        obtn.onclick=function(){//点击事件
            osubmit.removeAttribute("disabled")//移除提交按钮的disabled，使提交按钮可以被点击
            var gtime=setInterval(function(){//计时器，用来给发送验证码添加disabled和倒计时的动态效果
                otime--
                obtn.setAttribute("disabled","")
                obtn.innerText=`重新发送(${otime})`
                if(otime<1){//重新使按钮处于可以被点击的状态
                    clearInterval(gtime)
                    obtn.removeAttribute("disabled")
                    obtn.innerHTML=`发送验证码`
                }
            },1000)
        }
        osubmit.addEventListener("click",handler)//给提交按钮赋予点击事件
        function handler(){
            var text=document.getElementById("ipt").value
            if(text=="0505"){//判断input内的值是否为0505
                alert("验证码正确")
            }else{
                alert("验证码错误")
            }
        }
    </script>
</body>
</html>