如何实现点击后禁用24小时的HTML按钮（支持多用户）

要让按钮点击后立即禁用，且24小时后自动恢复，同时对每个用户独立生效，核心是利用浏览器的localStorage存储用户的点击时间——每个用户的浏览器会单独保存这份数据，不会互相干扰。以下是完整的实现代码和说明：

完整代码 #

<p>
    <input type='submit' value='Submit' id='btClickMe' />
</p>
<p id="msg"></p>
<script>
    const button = document.getElementById('btClickMe');
    const msg = document.getElementById('msg');
    const COOLDOWN = 24 * 60 * 60 * 1000; // 24小时对应的毫秒数

    // 页面加载时检查冷却状态
    function checkCooldown() {
        const lastClick = localStorage.getItem('lastSubmitTime');
        if (lastClick) {
            const timeElapsed = Date.now() - parseInt(lastClick);
            if (timeElapsed < COOLDOWN) {
                // 仍在冷却期，禁用按钮并设置恢复定时器
                button.disabled = true;
                const remaining = COOLDOWN - timeElapsed;
                setTimeout(() => {
                    button.disabled = false;
                    msg.textContent = '';
                }, remaining);
                // 显示剩余冷却时间（可选）
                const hours = Math.floor(remaining / (1000 * 60 * 60));
                const mins = Math.floor((remaining % (1000 * 60 * 60)) / (1000 * 60));
                msg.textContent = `请等待 ${hours} 小时 ${mins} 分钟后再次提交`;
            } else {
                // 冷却期已过，清除存储并启用按钮
                localStorage.removeItem('lastSubmitTime');
                button.disabled = false;
            }
        }
    }

    function handleSubmit() {
        msg.textContent = '数据已提交，按钮将在24小时后恢复可用 😊';
        // 记录当前点击时间到本地存储
        localStorage.setItem('lastSubmitTime', Date.now().toString());
        button.disabled = true;
        // 设置24小时后恢复按钮的定时器
        setTimeout(() => {
            button.disabled = false;
            msg.textContent = '';
        }, COOLDOWN);
    }

    // 绑定事件
    button.addEventListener('click', handleSubmit);
    // 页面加载时执行状态检查
    window.addEventListener('load', checkCooldown);
</script>

关键逻辑说明 #

• 用户独立性：localStorage是浏览器级别的本地存储，每个用户的存储数据相互隔离，确保冷却机制对单个用户生效
• 页面刷新兼容：页面加载时的checkCooldown函数会读取存储的点击时间，判断是否仍在冷却期，即使用户刷新或重新打开网站，状态也能正确恢复
• 时间计算：用毫秒数计算24小时时长，避免日期格式转换的潜在问题，计算更精准
• 双重保障：点击时设置定时器，同时页面加载时检查剩余时间，确保即使浏览器关闭重启，冷却逻辑依然有效

内容的提问来源于stack exchange，提问作者Shafer th