[JavaScript] 实现获取验证码按钮的计时失效_网页获取验证码按钮点不动-CSDN博客

本文链接：https://blog.csdn.net/Regino/article/details/105422710

本文介绍如何使用HTML、CSS和JavaScript实现一个获取验证码按钮的功能，包括禁用按钮、显示倒计时并自动恢复功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>