如何制作到达指定时间后才可跳转对应链接的HTML Button

核心实现逻辑为预先计算目标时区对应时间的UTC时间戳，按钮点击时校验当前时间是否晚于目标时间，仅校验通过后执行跳转操作。

完整代码示例 #

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>定时跳转按钮</title>
</head>
<body>
    <button id="jumpBtn">点击跳转</button>

    <script>
        // 目标时间：GMT+0530时区 2021年10月4日20:30
        // 转换为UTC时间为 2021年10月4日15:00（GMT+0530比UTC快5小时30分）
        // 注意JS中月份从0开始计数，10月对应参数为9
        const targetTimeStamp = Date.UTC(2021, 9, 4, 15, 0, 0);
        const jumpBtn = document.getElementById('jumpBtn');

        jumpBtn.addEventListener('click', function() {
            const nowTimeStamp = Date.now();
            if (nowTimeStamp >= targetTimeStamp) {
                // 校验通过，执行跳转，替换为实际需要的跳转地址即可
                window.location.href = '你的目标跳转地址';
            } else {
                alert('未到指定开放时间，暂无法跳转');
            }
        })

        // 可选：页面加载时判断时间，未到时间则按钮置灰
        // if (Date.now() < targetTimeStamp) {
        //     jumpBtn.disabled = true;
        //     jumpBtn.textContent = '未到开放时间';
        //     // 还可添加定时器到点自动解除禁用
        // }
    </script>
</body>
</html>

实现说明 #

• 时区兼容：直接通过UTC时间计算目标时间戳，不会受用户本地时区设置影响，可准确匹配GMT+0530时区的指定时间要求
• 实时校验：每次点击按钮都会获取当前时间做校验，无需担心页面提前打开导致时间判断失效
• 自定义调整：可根据自身需求修改目标时间、跳转地址、未到时间的提示逻辑，也可放开注释中的置灰逻辑优化交互体验

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