如何为JS定时展示div脚本添加中部时区支持及优化周定时规则

原代码核心问题 #

• 时区适配失效：自定义的toUTC方法仅生成了UTC时间戳，但没有赋值给currentTime变量，实际判断逻辑用的还是用户本地时间，和预设的UTC时间规则无法匹配
• 语法错误：两个else if判断里的endMsg1Time.getTime、endMsg2Time.getTime漏了执行括号，应该是getTime()，导致隐藏逻辑永远不触发
• 规则维护成本高：硬编码固定时间段的时间戳，无法适配周期性周级展示需求，手动更新效率极低

优化实现方案 #

以下方案默认适配美国中部时区（自动处理夏令时/冬令时偏移），实现每周日8:30-11:15、每周五19:00-20:15展示对应消息，无需手动定期更新时间规则：

function displayMsg() {
    // 初始化所有消息默认隐藏，避免异常场景误展示
    $('.Msg1, .Msg2').hide();
    
    // 指定美国中部时区，标识符固定为'America/Chicago'，如需切换其他时区可修改该参数
    const currentTime = new Date();
    const timeFormatter = new Intl.DateTimeFormat('en-US', {
        timeZone: 'America/Chicago',
        weekday: 'numeric', // 返回值：周日为0，周一为1，周六为6
        hour: '2-digit',
        minute: '2-digit',
        hour12: false
    });
    const parts = timeFormatter.formatToParts(currentTime);
    const timeParts = {};
    parts.forEach(part => {
        timeParts[part.type] = part.value;
    });
    const weekday = Number(timeParts.weekday);
    const hour = Number(timeParts.hour);
    const minute = Number(timeParts.minute);
    // 转换为当日总分钟数，方便时间区间判断
    const currentTotalMinutes = hour * 60 + minute;

    // 规则1：周日8:30-11:15 展示Msg1
    if (weekday === 0) {
        const start = 8*60 + 30;
        const end = 11*60 + 15;
        if (currentTotalMinutes >= start && currentTotalMinutes < end) {
            $('.Msg1').show();
        }
    }

    // 规则2：周五19:00-20:15 展示Msg2
    if (weekday === 5) {
        const start = 19*60;
        const end = 20*60 + 15;
        if (currentTotalMinutes >= start && currentTotalMinutes < end) {
            $('.Msg2').show();
        }
    }
}

// 页面加载时首次执行
displayMsg();
// 每分钟轮询一次，页面停留状态下时间到自动切换展示状态，无需用户刷新
setInterval(displayMsg, 60*1000);

方案说明 #

• 时区适配准确：直接调用JS内置国际化API指定时区，自动处理夏令时冬令时偏移，无需手动计算时区差
• 规则易维护：后续调整时间段仅需修改对应规则的周几、起止时间即可，不需要逐年逐月更新硬编码时间戳
• 兼容性强：Intl.DateTimeFormatAPI覆盖所有现代浏览器，无需引入额外依赖
• 支持时区切换：如需适配其他时区，仅需修改timeZone参数为对应IANA时区标识符即可，比如中国时区对应Asia/Shanghai

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