根据时间加载不同HTML页面的实现求助（已实现图片版）

方法1：页面重定向（推荐） #

这种方式会根据时间直接跳转到对应的完整HTML页面，适合HTML2.html本身包含独立交互逻辑（如可点击切换图片）的场景。

修改后的代码如下：

<head>
    <title>Il Forno menu</title>
    <script type="text/javascript">
        // 定义不同时间段对应的HTML页面路径
        var pages = [
            "HTML1.html",       // 午夜到14:59（非晚餐时段）
            "HTML2.html"        // 15:00到23:59（晚餐时段）
        ];

        function loadPageByTime() {
            var now = new Date();
            var hr = now.getHours();
            var pageIndex = 0; // 默认加载非晚餐页面

            // 判断是否为晚餐时段
            if (hr >= 15 && hr < 24) {
                pageIndex = 1;
            }

            // 跳转到目标页面
            window.location.href = pages[pageIndex];
        }
    </script>
</head>

<body onload="loadPageByTime()">
    <!-- 可选：加载提示 -->
    <p>正在加载菜单...</p>
</body>

关键修改说明： #

• 将原图片路径数组替换为HTML页面路径数组
• 修复了原代码中变量名不一致的错误（原代码定义menukaarts却使用images）
• 用window.location.href实现页面跳转，替代原有的图片元素赋值逻辑

方法2：当前页面嵌入HTML内容 #

如果希望不跳转页面，直接在当前页面加载目标HTML的内容，可使用fetch API实现（需确保HTML1.html和HTML2.html仅包含页面主体内容，而非完整的HTML文档结构）：

<head>
    <title>Il Forno menu</title>
    <script type="text/javascript">
        var pages = [
            "HTML1.html",
            "HTML2.html"
        ];

        function loadPageContent() {
            var now = new Date();
            var hr = now.getHours();
            var pageIndex = 0;

            if (hr >= 15 && hr < 24) {
                pageIndex = 1;
            }

            // 加载目标HTML内容并插入到容器中
            fetch(pages[pageIndex])
                .then(response => response.text())
                .then(html => {
                    document.getElementById("content-container").innerHTML = html;
                })
                .catch(error => {
                    console.error("加载页面失败：", error);
                    document.getElementById("content-container").innerHTML = "<p>菜单加载失败，请稍后重试。</p>";
                });
        }
    </script>
</head>

<body onload="loadPageContent()">
    <div id="content-container">
        <p>正在加载菜单...</p>
    </div>
</body>

注意事项： #

• 如果HTML1.html/HTML2.html是完整的HTML文档（包含<html>/<head>/<body>标签），需修改fetch回调逻辑，仅提取其中的<body>内容，避免嵌套文档结构导致的问题
• 这种方式需要确保浏览器支持fetch API（现代浏览器均支持，如需兼容旧版可使用XMLHttpRequest替代）

常见错误排查 #

• 变量名不一致：原代码中定义了menukaarts数组，但使用时写的是images[DJ]，导致无法正确获取路径
• 错误的内容加载方式：直接给<img>标签的src赋值HTML文件路径，这是无效的，图片标签只能加载图片资源
• 路径错误：确保HTML页面的路径正确，可使用绝对路径或相对路径，避免因路径问题导致无法加载页面

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