使用js写一个登录验证码效果

苦逼的猿宝

已于 2024-02-28 15:18:22 修改

阅读量485

点赞数 7

分类专栏：前端面试题文章标签： javascript 前端面试

于 2024-02-28 15:16:49 首次发布

本文链接：https://blog.csdn.net/GAGGAAAAA/article/details/136347075

版权

前端面试题专栏收录该内容

13 篇文章 1 订阅

订阅专栏

面试题

登录页面获取验证码的功能，用户点击获取验证码按钮(id=”btn1”)，按文字变为“(N)后获取验证码”，N为倒计对秒数，从 60 开始，每秒减一，减到 0的时候，按钮文字变为“获取验证码”，并需要做防止短时间内重复点击，请写出对应的代码。

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
    <div>
        <button id="btn1" onclick="click">获取验证码</button>
    </div>
<body>
    <script>
        // 获取页面的按钮元素
        var btn1 = document.getElementById('btn1');
        // 按钮点击事件
        btn1.addEventListener('click', function(){
            // 将按钮设置为不可用状态
            btn1.disabled = true;
            // 设置倒计时时间
            var time = 60;
            // 设置定时器，每隔1秒执行一次
            var timer = setInterval(function(){
                // 判断时间是否到达0
                if(time == 0){
                    // 将按钮恢复为可用状态
                    btn1.disabled = false;
                    // 修改按钮文本
                    btn1.innerHTML = '获取验证码';
                    // 清除定时器
                    clearInterval(timer);
                }else{
                    // 修改时间
                    time--;
                    // 修改按钮文本
                    btn1.innerHTML = time + '秒后重新获取';
                }
            }, 1000);
        })

    </script>
</body>
</html>

效果图

点击前

点击后

苦逼的猿宝

关注

7
点赞
踩
10

收藏

觉得还不错? 一键收藏
打赏
0
评论
使用js写一个登录验证码效果

登录页面获取验证码的功能，用户点击获取验证码按钮(id=”btn1”)，按文字变为“(N)后获取验证码”，N为倒计对秒数，从60开始，每秒减一，减到0的时候，按钮文字变为“获取验证码”，并需要做防止短时间内重复点击，请写出对应的代码。
复制链接

扫一扫