发送验证码

最新推荐文章于 2024-06-15 11:46:27 发布

black_tea114514

最新推荐文章于 2024-06-15 11:46:27 发布

阅读量432

点赞数

文章标签：前端 javascript html

本文链接：https://blog.csdn.net/black_tea114514/article/details/128718232

版权

要求：

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

原理：

运用定时器，改变按钮状态，获取value值进行判断，倒计时设置60然后自减，一秒执行一次

代码：

 <style>
        .box{
            margin:200px auto 0;
            width: 400px;
        }
        input{
            outline: none;
        }
    </style>
</head>
<body>
    <div class="box">
        <input type="text" placeholder="请输入验证码">
        <button class="queren" disabled>确认</button>
        <button class="fasong">发送</button>
    </div>
    <script>
        var qr = document.querySelector(".queren")
        var fs = document.querySelector(".fasong")
        var word = document.querySelector("input")
        fs.onclick = function(){
            fs.disabled = true
            qr.disabled = false
            var emit1 = setTimeout(function(){
                fs.disabled = false
            },60000)
            var x = 60
            var emit2 = setInterval(function(){
                x--
                fs.innerHTML = `${x}秒`
                if(x==0){
                    clearInterval(emit2)
                }
            },1000)
        }
        qr.onclick = function(){
            var text = word.value
            if(text == "0505"){
                alert('提交成功')
            }
            else{
                alert('验证码错误')
            }
        }
    </script>
</body>