发送验证码

最新推荐文章于 2025-12-26 15:01:48 发布

原创最新推荐文章于 2025-12-26 15:01:48 发布 · 159 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #开发语言

该代码示例展示了如何使用JavaScript实现点击发送按钮后禁用按钮并开始60秒倒计时，内容变为秒数显示。倒计时结束后，用户可以重新发送验证码。提交按钮在输入验证码0505后弹窗提示成功。

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

原理
onclick事件和函数配合
里面添加计时器
获取文本框内容并判断
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>
</head>
<body>
    <input type="text" name="" id="input"><button id="btn1">发送</button>
    <br>
    <button type="submit" id="btn2" disabled>提交</button>


    <script>
        var btn1 = document.getElementById("btn1")
        var btn2 = document.getElementById("btn2");
        
    

        btn1.onclick = function(){
            btn1.disabled=true;//当点击后倒计时时候不能点击此按钮
            btn2.disabled=false;//当点击后倒计时时候能点击此按钮
            var time = 60;//倒计时60秒 
            var timer = setInterval(fun1,1000);//设置定时器 

            function fun1(){
                time--; 
                if(time>=0){
                    btn1.innerHTML = time + "s后重新发送";
                }
                else{
                    btn1.innerHTML = "重新发送验证码"; 
                    btn1.disabled = false;//倒计时结束能够重新点击发送的按钮 
                    clearTimeout(timer);
                    time = 60;
                }
            }
        }

        btn2.onclick = function(){
            var text = document.getElementById("input").value;//获取文本框内容
            console.log(text)
            if(text == "0505"){
                alert("YES");
            }
            else{
                alert("NO");
            }
        }
    </script>
</body>
</html>