Demo4 发送验证码

最新推荐文章于 2024-08-03 17:05:14 发布

龙司Glsa

最新推荐文章于 2024-08-03 17:05:14 发布

阅读量302

点赞数

分类专栏： JavaScript 文章标签： javascript 前端 css

本文链接：https://blog.csdn.net/m0_74006038/article/details/128702202

版权

JavaScript 专栏收录该内容

24 篇文章 0 订阅

订阅专栏

发送验证码
需求：发送按钮点击后，会被禁用；被点击后，按钮里面的内容会变化成1分钟的倒计时；待发送按钮被触发后才可以点击提交按钮，需在验证码框里填写0505，用弹窗提示成功
实现原理：禁用效果通过disabled属性倒计时通过计时器将60秒逐渐递减通过if语句匹配输入值是否相等

<!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>
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.box{
    width: 400px;
    height: 200px;
    background-color: antiquewhite;
    padding-top: 50px;
}

.box p{
    display:inline-block;
    width: 50px;
    text-align:center;
}

#code{
    height: 25px;
    outline: none;
}

#send{
    height: 25px;
    width: 50px;
    border-radius: 10px;
    background-color: #ff3a3a;
    border: none;
}

#submit{
    height: 25px;
    width: 50px;
    border-radius: 10px;
    background-color: #ff3a3a;
    border: none;
}

    </style>

</head>
<body>
    <div class="box">
        <form action="">
            <p>验证码</p><input type="text" id="code" placeholder="请输入验证码">
            <input type="button" value="发送" id="send">
            <input type="button" value="提交" id="submit" >
        </form>
    </div>
</body>

<script>
var send = document.getElementById("send")
var submit = document.getElementById("submit")

var point = 0

send.onclick = function(){
    submit.disabled = false
    send.disabled = true

    var i = 60
    var sendTime = setInterval(function(){
        send.value = i
        i--
        if(i == 0){
            clearInterval(sendTime)
            send.disabled = false
            send.value = "发送"
        }
        if(point){
            clearInterval(sendTime)
            send.value = "发送"
        }
    },1000)
}
submit.onclick = function(){
    if(!(code.value == "0505")){
        alert("请输入正确的验证码")
    }else{
        alert("验证码正确")
         point = 1
        send.value = "发送"
    }
}

</script>
</html>