发送验证码

最新推荐文章于 2024-10-07 09:24:46 发布

Sodapease

最新推荐文章于 2024-10-07 09:24:46 发布

阅读量543

点赞数

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/Sodapease/article/details/128668083

版权

发送验证码

需求
实现原理
代码
效果展示

需求

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

实现原理

需求	实现原理
发送按钮点击后，会被禁用	在设置点击事件函数中调用禁用， send.disabled = true
被点击后，按钮里面的内容会变化成1分钟的倒计时	初始化禁用时间为60s
被点击后，按钮里面的内容会变化成1分钟的倒计时	设置定时器，并判断是否定时返回0s，若是则返回初始发送状态，若不是显示剩余秒数，且保持点击后禁用状态
待发送按钮被触发后才可以点击提交按钮,需在验证码框里填写0505，用弹窗提示成功。	给提交按钮绑定鼠标点击事件，调出输入的值来判断是否发送正确验证码

代码

<!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 {
            height: 200px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        #input {
            width: 200px;
            height: 20px;
            border: 1px solid #b0b0b0;
            outline: none;
            padding: 5px;
        }

        button {
            border: 1px solid #b0b0b0;
            height: 31px;
            background-color: #364c7b;
            color: #fff;
        }

        .submit {
            border: 1px solid #b0b0b0;
            height: 31px;
            background-color: #fff;
            outline: none;
        }
    </style>
</head>

<body>
    <div>
        <input type="password" id="input">
        <button class="send">发送</button>
        <input type="submit" class="submit">
    </div>

    <script>
        const send = document.querySelector('button');
        let time = 60;   //初始化禁用时间
        send.addEventListener('click', function () {
            send.disabled = true;
            const timer = setInterval(function () {
                if (time == 0) {
                    //清除定时器
                    clearInterval(timer);
                    send.innerHTML = '发送';//定时完成恢复发送样式
                } else {
                    send.innerHTML = '倒计时' + time + '秒';//倒计时不为零时设置文字样式
                    time--;
                }
            }, 100);//播放速度
            const submit = document.querySelector('.submit')
            const num = document.querySelector('#input')
            submit.addEventListener('click', function () {
                let pass = num.value //获取密码的值
                //判断是否输入准确
                if (pass == '0505') {
                    alert('提交成功😁')
                } else {
                    alert('有内鬼，终止交易🤪')
                }
            })
        });

    </script>
</body>

</html>