发送验证码

最新推荐文章于 2025-12-03 13:04:04 发布

原创最新推荐文章于 2025-12-03 13:04:04 发布 · 136 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #html

本文展示了如何使用JavaScript实现点击发送按钮后禁用该按钮并开始1分钟倒计时，倒计时结束后恢复可点击。用户需在输入框中输入验证码0505，提交后会弹窗提示注册成功或失败。代码包括HTML结构、CSS样式和JS逻辑，涉及按钮状态控制、计时器设置及事件监听。

需求

点击“发送”按钮后，会被禁用
被点击后，按钮里面会变成1分钟倒计时
待“发送”按钮被触发后，才可以点击提交按钮
需要在验证码框里输入0505，提交后便用弹窗提示成功

效果展示

验证码

实现原理

将提交按钮设为disabled，默认人不可按，通过disabled=true/false来控制按钮是禁用还是启动;点击发送按钮。分别用到两个计时器setInterval和setTimeout;当倒计时开始的时候修改按钮内部的内容，用来保存倒计时数字。

具体代码如下

JS部分

    <script>
    window.onload=function(){
    var input = document.querySelector("input")
    var fsbtn = document.querySelector(".fs")
    var tjbtn = document.querySelector(".tj")

    tjbtn.disabled = true
    fsbtn.onclick = function(){
        fsbtn.disabled = true
        var timer1 = setTimeout(() => {
            fsbtn.disabled = false
        }, 60000);
        var t=60
        var timer2 = setInterval(() => {
            t--
            if (t==0) {
                clearInterval(timer2)//当倒计时结束的时候清除计时器
            }
           fsbtn.innerHTML=`<span>${t}s</span>` //利用span标签用来保存倒计时数字
        }, 1000);
        tjbtn.disabled = false
        input.placeholder="请输入验证码"
    }
    tjbtn.onclick=function(){
        if (input.value=="0505") {
            alert("注册成功")
        }else{
            alert("验证码错误")
        }
    }
}
    </script>

完整代码

<!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>验证码</title>
    <style>
        .box{
            margin-left: 630px;
            margin-top: 140px;
        }
        input{
            display: inline-block;
            width: 200px;
            height: 20px;
            padding: 4px;
        }
        .fs{
            display: inline-block;
            width: 80px;
            height: 30px;
        }
        .tj{
            display: inline-block;
            width: 80px;
            height: 30px;
        }
    </style>
</head>
<body>
    <div class="box">
        <input type="text" placeholder="请发送验证码">
        <button class="fs">发送</button>
        <button class="tj">提交</button>
    </div>
    <script>
    window.onload=function(){
    var input = document.querySelector("input")
    var fsbtn = document.querySelector(".fs")
    var tjbtn = document.querySelector(".tj")

    tjbtn.disabled = true
    fsbtn.onclick = function(){
        fsbtn.disabled = true
        var timer1 = setTimeout(() => {
            fsbtn.disabled = false
        }, 60000);
        var t=60
        var timer2 = setInterval(() => {
            t--
            if (t==0) {
                clearInterval(timer2)//当倒计时结束的时候清除计时器
            }
           fsbtn.innerHTML=`<span>${t}s</span>` //利用span标签用来保存倒计时数字
        }, 1000);
        tjbtn.disabled = false
        input.placeholder="请输入验证码"
    }
    tjbtn.onclick=function(){
        if (input.value=="0505") {
            alert("注册成功")
        }else{
            alert("验证码错误")
        }
    }
}
    </script>
</body>
</html>