基于星期与时段切换网页内容的jQuery脚本报错排查及功能实现

问题描述 #

本人是JavaScript新手，之前没找到解决办法。写了一段jQuery脚本，想根据星期几和当日时段在网页显示对应节目，但脚本没法正常运行，需要排查错误并实现正确的内容切换逻辑，显示当前正在播出的节目。

原代码如下：

$(document).ready(function () {

var start = new Date();
var end = new Date();
var time = new Date().getTime();



let days = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"]

days.forEach((day,index)=>{
    // Check if the index of day value is equal to the returned value of getDay()
if(index == new Date().getDay()){
    if (time >= start.setHours(06,00) && time <= end.setHours(09,59)) {
    let show = "Show1";
    $(".open").show();
    $(".closed").hide();
}
else {
    $(".open").hide();
    $(".closed").show();

}
if (time >= start.setHours(10,00) && time <= end.setHours(11,59)) {
    let show = "Show2";
    $(".open").show();
    $(".closed").hide();
}
else {
    $(".open").hide();
    $(".closed").show();

}
if (time >= start.setHours(12,00) && time <= end.setHours(13,59)) {
    let show = "Show3";
    $(".open").show();
    $(".closed").hide();
}
else {
    $(".open").hide();
    $(".closed").show();
)
}}};

原代码问题排查 #

• 语法错误：多处括号不匹配（最后一个if的闭合括号、forEach的闭合括号缺失），直接导致代码无法执行
• 逻辑冲突：每个时段的if-else会依次执行，后面的判断会覆盖前面的结果，比如当前在10-12点时，第一个else会先隐藏.open，第二个if再显示，逻辑混乱
• 变量污染：start和end调用setHours时会修改自身时间，导致后续时段判断的时间基准出错
• 冗余循环：没必要遍历所有星期，直接获取当前星期索引即可

修正后的代码 #

$(document).ready(function () {
    // 获取当前时间和星期索引
    const now = new Date();
    const currentTime = now.getTime();
    const currentDayIndex = now.getDay();

    // 配置各星期的节目时段，可按需修改不同星期的节目安排
    const schedule = [
        // 周日（索引0）
        [{ start: '06:00', end: '09:59', show: 'Show1' }, { start: '10:00', end: '11:59', show: 'Show2' }, { start: '12:00', end: '13:59', show: 'Show3' }],
        // 周一（索引1）
        [{ start: '06:00', end: '09:59', show: 'Show1' }, { start: '10:00', end: '11:59', show: 'Show2' }, { start: '12:00', end: '13:59', show: 'Show3' }],
        // 周二（索引2）
        [{ start: '06:00', end: '09:59', show: 'Show1' }, { start: '10:00', end: '11:59', show: 'Show2' }, { start: '12:00', end: '13:59', show: 'Show3' }],
        // 周三（索引3）
        [{ start: '06:00', end: '09:59', show: 'Show1' }, { start: '10:00', end: '11:59', show: 'Show2' }, { start: '12:00', end: '13:59', show: 'Show3' }],
        // 周四（索引4）
        [{ start: '06:00', end: '09:59', show: 'Show1' }, { start: '10:00', end: '11:59', show: 'Show2' }, { start: '12:00', end: '13:59', show: 'Show3' }],
        // 周五（索引5）
        [{ start: '06:00', end: '09:59', show: 'Show1' }, { start: '10:00', end: '11:59', show: 'Show2' }, { start: '12:00', end: '13:59', show: 'Show3' }],
        // 周六（索引6）
        [{ start: '06:00', end: '09:59', show: 'Show1' }, { start: '10:00', end: '11:59', show: 'Show2' }, { start: '12:00', end: '13:59', show: 'Show3' }]
    ];

    // 默认显示关闭状态
    $(".open").hide();
    $(".closed").show();

    // 遍历当天的节目时段，匹配当前时间
    const todaySchedule = schedule[currentDayIndex];
    for (const slot of todaySchedule) {
        const [startHour, startMin] = slot.start.split(':').map(Number);
        const [endHour, endMin] = slot.end.split(':').map(Number);
        
        // 创建当天对应的时段时间对象
        const startTime = new Date(now.getFullYear(), now.getMonth(), now.getDate(), startHour, startMin);
        const endTime = new Date(now.getFullYear(), now.getMonth(), now.getDate(), endHour, endMin);

        if (currentTime >= startTime.getTime() && currentTime <= endTime.getTime()) {
            console.log(`当前播出: ${slot.show}`);
            $(".open").show();
            $(".closed").hide();
            break; // 找到匹配时段后停止遍历
        }
    }
});

优化说明 #

• 修复所有语法错误，确保代码正常解析
• 用配置数组管理节目时段，后续修改节目安排更方便
• 每个时段单独创建时间对象，避免变量污染导致的判断错误
• 先设置默认关闭状态，再匹配当前时段切换，逻辑更清晰
• 找到匹配时段后立即终止循环，提升执行效率

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