发送验证码

最新推荐文章于 2024-07-12 09:36:48 发布

l20040121_

最新推荐文章于 2024-07-12 09:36:48 发布

阅读量106

点赞数

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

本文链接：https://blog.csdn.net/l20040121_/article/details/128697340

版权

需求：
1.发送按钮点击后，会被禁用；
2.被点击后，按钮里面的内容会变化成1分钟的倒计时；
3.待发送按钮被触发后才可以点击提交按钮，需在验证码框里填写0505，用弹窗提示成功。
实现原理：
1.在设置点击事件函数中调用禁用，send.disabled = true实现发送后按钮禁用
2.设置计时器当计时到0时重新启用按钮
3.给提交按钮绑定事件判断是否发送正确。
代码：

<!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="password" id="input">
<button id="btn1">发送验证码</button>
<input type="submit" class="submit">
<script>
    const send = document.querySelector('button');
var btn = document.querySelector('btn1');  //获取点击按钮
var time = 60; //定义剩下的秒数
btn1.addEventListener('click', function() {
    btn1.disabled = true; //点击按钮实现禁用
    timer = setInterval(() => {
         if (time == 0) { //如果时间到了就清除定时器并复原按钮
            clearInterval(timer); //清除定时器
            btn1.innerHTML = '发送验证码';
         } else {
            btn1.innerHTML = '还剩下' + time + '秒';
            time--; //没变化一次时间减一秒
         }
    }, 1000);
})
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>

效果展示：

QQ录屏20230115200405

l20040121_

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
发送验证码

1.在设置点击事件函数中调用禁用，send.disabled = true实现发送后按钮禁用。3.待发送按钮被触发后才可以点击提交按钮，需在验证码框里填写0505，用弹窗提示成功。2.被点击后，按钮里面的内容会变化成1分钟的倒计时；3.给提交按钮绑定事件判断是否发送正确。2.设置计时器当计时到0时重新启用按钮。//如果时间到了就清除定时器并复原按钮。QQ录屏20230115200405。1.发送按钮点击后，会被禁用；//没变化一次时间减一秒。//点击按钮实现禁用。//判断是否输入准确。
复制链接

扫一扫