网页根据时间日期切换图片的JavaScript实现求助

需要实现两个核心需求：

• 页面加载时全屏显示图片，适配不同设备平台
• 根据工作日/周末+时段自动切换对应的演出海报

原代码存在的问题：

• CSS使用固定宽高，无法适配不同尺寸的屏幕
• JS逻辑仅区分上午/下午，未覆盖工作日/周末的场景，且通过src.indexOf判断图片的方式不够可靠，重复执行时可能出现无效操作

优化后的HTML #

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!-- 适配移动端屏幕的视口设置 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="styles.css" />
    <title>演出海报自动切换</title>
</head>
<body>
    <!-- 用容器包裹图片，便于控制全屏布局 -->
    <div class="poster-container">
        <img id="poster" src="images/default.png" alt="演出海报">
    </div>
    <script type="text/javascript" src="app.js"></script>
</body>
</html>

修改说明：

• 添加viewport元标签，保证移动端屏幕适配
• 新增容器div，让全屏布局的控制更灵活
• 给图片设置语义化的ID和alt属性

优化后的CSS #

* {
    /* 清除浏览器默认的内外边距 */
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-image: linear-gradient(white, dimgray);
    /* 禁止页面滚动，避免出现滚动条 */
    overflow: hidden;
    min-height: 100vh;
}

.poster-container {
    /* 容器占满整个视口 */
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px;
}

.poster-container img {
    border-radius: 4px;
    /* 图片自适应容器，保持比例且完全覆盖容器 */
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

修改说明：

• 用通配符清除默认内外边距，避免布局偏差
• 设置body为全屏高度且隐藏滚动，保证页面无多余滚动条
• 容器使用视口单位vw/vh占满屏幕，通过flex布局让图片居中
• 用object-fit:cover替代原有的fill，保证图片比例不变，同时适配不同屏幕尺寸

优化后的JavaScript #

// 统一管理海报路径：区分工作日/周末，不同时段对应不同海报
const POSTER_CONFIG = {
    // 工作日：周一到周五（getDay()返回1-5）
    weekday: {
        morning: 'images/weekday-morning.jpeg', // 上午场（00:00-12:00）
        afternoon: 'images/weekday-afternoon.jpeg', // 下午场（12:00-18:00）
        evening: 'images/weekday-evening.jpeg' // 晚场（18:00-24:00）
    },
    // 周末：周六、周日（getDay()返回0、6）
    weekend: {
        morning: 'images/weekend-morning.jpeg',
        afternoon: 'images/weekend-afternoon.jpeg',
        evening: 'images/weekend-evening.jpeg'
    }
};

// 存储当前显示的海报路径，避免重复设置src
let currentPoster = '';

function updatePoster() {
    const now = new Date();
    const dayOfWeek = now.getDay();
    const hour = now.getHours();
    const posterImg = document.getElementById('poster');

    // 判断当前是工作日还是周末
    const isWeekday = dayOfWeek >= 1 && dayOfWeek <= 5;
    const config = isWeekday ? POSTER_CONFIG.weekday : POSTER_CONFIG.weekend;

    // 判断当前时段，匹配对应海报
    let targetPoster;
    if (hour < 12) {
        targetPoster = config.morning;
    } else if (hour < 18) {
        targetPoster = config.afternoon;
    } else {
        targetPoster = config.evening;
    }

    // 只有当目标海报和当前显示不同时，才更新图片
    if (targetPoster !== currentPoster) {
        posterImg.src = targetPoster;
        currentPoster = targetPoster;
    }
}

// 页面加载完成后立即初始化海报
window.addEventListener('load', updatePoster);

// 每30秒检查一次时间，及时切换海报（可根据需求调整间隔）
setInterval(updatePoster, 30000);

修改说明：

• 用配置对象统一管理所有海报路径，后续修改或新增海报更方便
• 新增currentPoster变量跟踪当前显示的海报，避免重复设置src（减少不必要的网络请求和DOM操作）
• 细化时段划分，同时准确区分工作日和周末
• 页面加载时立即执行初始化，避免初始显示默认图片的延迟

内容的提问来源于stack exchange，提问作者James-js