[JavaScript] 实现获取验证码按钮的计时失效

1. 主要功能

根据给出的 HTML 页面，实现指定功能。
点击 “获取验证码” 按钮之后，按钮被禁用，鼠标变为不可用图标，30 秒之后取消禁用。
按钮上显示 ”n 秒后重新获取“，n 从 30 开始倒数显示。

2. 给定的 HTML 页面

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>获取验证码按钮</title>
    <script type="text/javascript">
    
    </script>
</head>
<body>
<!--点击按钮后，按钮被禁用，倒数60秒后可重新点击-->
<button id="btn">获取验证码</button>
</body>
</html>

3. 参考答案

查询 css3.0参考手册 >> 属性列表 >> 用户界面属性 >> Cursor 可知，鼠标显示禁用图标的css语法：cursor: not-allowed

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>获取验证码按钮</title>

    <script type="text/javascript">

        function getVarCode() {
            //将按钮禁用
            let btn = document.querySelector("#btn");
            btn.disabled = true;
            btn.style.cursor = "not-allowed"; //鼠标显示禁用图标

            //按钮显示60秒倒计时
            let second = 30;
            let counter = setInterval(function () {
                second--;
                if (second > 0) {
                    btn.innerText = second + "秒后重新获取";
                }
            }, 1000);

            //60秒时间间隔到了之后清除倒计时，按钮恢复点击功能
            setTimeout(function () {
                //清除倒计时定时器
                clearInterval(counter);
                //按钮恢复
                btn.innerHTML = "获取验证码";
                btn.disabled = false;
                btn.style.cursor = "";
            }, 30000);
        }

    </script>
</head>
<body>

<!--点击按钮后，按钮被禁用，倒数60秒后可重新点击-->
<button id="btn" onclick="getVarCode()">获取验证码</button>
</body>
</html>

效果图：

原文链接：https://qwert.blog.csdn.net/article/details/105422710

Regino

发布了369 篇原创文章 · 获赞 381 · 访问量 2万+

私信关注

[JavaScript] 实现获取验证码按钮的计时失效

目录

1. 主要功能

2. 给定的 HTML 页面

3. 参考答案

猜你喜欢