JavaScript实现带倒计时和持久化的按钮禁用与自动启用功能

<button id="voteButton">点击投票 (+1)</button>

document.addEventListener('DOMContentLoaded', () => {
    const voteButton = document.getElementById('voteButton');
    const BUTTON_ID = voteButton.id; // 获取按钮ID，用于localStorage键名
    const DISABLE_DURATION_MS = 24 * 60 * 60 * 1000; // 禁用时长：24小时（毫秒）

    /**
     * 重新启用按钮并清除localStorage中的禁用信息
     */
    const reEnableButton = () => {
        voteButton.disabled = false;
        localStorage.removeItem(`${BUTTON_ID}_disabledUntil`);
        console.log('按钮已重新启用。');
    };

    /**
     * 禁用按钮并设置定时器，同时将禁用信息存储到localStorage
     * @param {number} disableUntilTimestamp - 按钮应该被重新启用的时间戳
     */
    const disableButton = (disableUntilTimestamp) => {
        voteButton.disabled = true;
        localStorage.setItem(`${BUTTON_ID}_disabledUntil`, disableUntilTimestamp);

        const currentTime = Date.now();
        const remainingTime = disableUntilTimestamp - currentTime;

        if (remainingTime > 0) {
            console.log(`按钮已禁用，将在 ${Math.ceil(remainingTime / 1000 / 60)} 分钟后重新启用。`);
            setTimeout(reEnableButton, remainingTime);
        } else {
            // 如果剩余时间小于等于0，说明已经过了禁用期，直接重新启用
            reEnableButton();
        }
    };

    // --- 页面加载时检查按钮状态 ---
    const storedDisabledUntil = localStorage.getItem(`${BUTTON_ID}_disabledUntil`);

    if (storedDisabledUntil) {
        const disabledUntilTimestamp = parseInt(storedDisabledUntil, 10);
        const currentTime = Date.now();

        if (currentTime < disabledUntilTimestamp) {
            // 如果当前时间小于禁用截止时间，说明按钮仍应处于禁用状态
            disableButton(disabledUntilTimestamp);
        } else {
            // 如果当前时间已超过禁用截止时间，则立即重新启用按钮并清除localStorage
            reEnableButton();
        }
    }

    // --- 按钮点击事件处理 ---
    voteButton.addEventListener('click', () => {
        alert('您的投票已记录，下次投票将在24小时后可用。');
        const disableUntilTimestamp = Date.now() + DISABLE_DURATION_MS;
        disableButton(disableUntilTimestamp);
    });
});