基于时间动态加载不同 HTML 页面的完整实现教程
热心网友
52
转载
免费影视、动漫、音乐、游戏、小说资源长期稳定更新！ 👉 点此立即查看 👈
本文介绍如何根据当前时间段（如早、中、晚）自动加载并显示不同的 html 页面，涵盖页面切换逻辑、异步内容获取、dom 替换及实际部署注意事项。
想让你的网站“活”起来，根据早、中、晚不同时段自动换上不同的“皮肤”吗？这不仅仅是换张背景图那么简单，而是需要根据时间，动态加载并展示一个完整的、包含独立样式和交互逻辑的HTML页面。比如，早餐时段展示早餐菜单页面，晚餐时段则无缝切换到晚餐主题。
听起来复杂？别担心，下面这套方案，将为你拆解一个健壮、可维护且符合现代Web标准的完整实现流程。
✅ 核心思路
整个流程可以概括为一条清晰的流水线：
- 判断时段：利用 Ja vaScript 的
Date.getHours()获取当前小时，映射到预设的时间段。 - 请求资源：通过
fetch()API 异步请求目标时段的 HTML 文件。 - 安全解析：使用
DOMParser将获取的 HTML 字符串解析为一个独立的文档对象，这比直接操作innerHTML更安全可控。 - 内容替换：精准提取新文档的标题（
</code>）和主体内容（<code><body></code>），注入当前页面，同时避免粗暴的全量覆盖可能引发的脚本失效或安全风险。</li> <li><strong>保持交互</strong>：由于整个 DOM 结构被完整替换，新页面内原有的 Ja vaScript 交互逻辑（例如一个图片轮播组件）能够继续正常运行。</li> </ul> <h3>? 完整示例代码</h3> <pre class="brush:php;toolbar:false;"><!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>时段专属菜单 正在为您匹配今日时段菜单...