如何实现主网页在指定日期或时间自动切换展示对应内容？

前端纯JS实现（适合静态站点/无后端场景） #

这是成本最低的实现方式，只需要在现有主页代码中添加少量原生JS即可，无需额外依赖：

• 第一步：在主页需要展示动态内容的位置预留DOM容器

<div id="dynamic-content-container"></div>

• 第二步：添加JS逻辑，实现日期判断和内容匹配
  如果你要展示的内容量不大，可以直接把内容定义在JS中：

// 配置星期和内容的映射关系，key对应new Date().getDay()的返回值：0=周日，1=周一，2=周二，3=周三，4=周四，5=周五，6=周六
const weekContentMap = {
  0: `
    <h3>本周推荐学习内容</h3>
    <ul>
      <li>前端DOM操作核心知识点梳理</li>
      <li>响应式布局适配技巧汇总</li>
    </ul>
  `,
  1: `
    <h3>本周推荐学习内容</h3>
    <ul>
      <li>前端DOM操作核心知识点梳理</li>
      <li>响应式布局适配技巧汇总</li>
    </ul>
  `,
  4: `
    <h3>本周推荐学习内容</h3>
    <ul>
      <li>前端DOM操作核心知识点梳理</li>
      <li>响应式布局适配技巧汇总</li>
    </ul>
  `,
  2: `
    <h3>本周实践任务</h3>
    <ul>
      <li>完成首页模块交互逻辑开发</li>
      <li>提交项目需求分析文档</li>
    </ul>
  `,
  5: `
    <h3>本周实践任务</h3>
    <ul>
      <li>完成首页模块交互逻辑开发</li>
      <li>提交项目需求分析文档</li>
    </ul>
  `,
  3: `<h3>自由安排日</h3><p>可根据自身进度调整学习和开发计划</p>`,
  6: `<h3>休息日</h3><p>本周进度达标，可休息调整</p>`
}

// 页面加载后执行内容渲染
window.onload = function() {
  const currentWeekDay = new Date().getDay()
  const renderContainer = document.getElementById('dynamic-content-container')
  if (renderContainer && weekContentMap[currentWeekDay]) {
    renderContainer.innerHTML = weekContentMap[currentWeekDay]
  }
}

• 如果你要展示的内容来自其他独立页面，可以把对应页面的内容存为单独的HTML片段，通过fetch加载插入：

// 配置星期和内容片段路径的映射关系
const weekContentPathMap = {
  0: './contents/group-a.html',
  1: './contents/group-a.html',
  4: './contents/group-a.html',
  2: './contents/group-b.html',
  5: './contents/group-b.html',
  3: './contents/wed-content.html',
  6: './contents/weekend-content.html'
}

async function renderDateContent() {
  const currentWeekDay = new Date().getDay()
  const renderContainer = document.getElementById('dynamic-content-container')
  if (!renderContainer || !weekContentPathMap[currentWeekDay]) return
  const contentRes = await fetch(weekContentPathMap[currentWeekDay])
  const contentHtml = await contentRes.text()
  renderContainer.innerHTML = contentHtml
}

window.onload = renderDateContent

后端实现（适合有服务端渲染的场景） #

如果你的站点有后端服务，也可以直接在服务端完成日期判断，直接输出对应内容，避免前端闪烁：
以PHP为例，实现代码如下：

<?php
// 获取当前星期值，0=周日，1=周一...6=周六
$current_week_day = date('w');
$content_map = [
  0 => file_get_contents('./contents/group-a.html'),
  1 => file_get_contents('./contents/group-a.html'),
  4 => file_get_contents('./contents/group-a.html'),
  2 => file_get_contents('./contents/group-b.html'),
  5 => file_get_contents('./contents/group-b.html'),
  3 => file_get_contents('./contents/wed-content.html'),
  6 => file_get_contents('./contents/weekend-content.html'),
];
echo $content_map[$current_week_day];
?>

注意事项 #

• 前端JS默认读取的是用户设备的本地时间，如果需要全球统一时间，可以自行实现服务端时间接口获取标准时间再做匹配
• 动态插入的内容如果包含交互逻辑，需要在内容插入完成后再绑定对应事件
• 如果内容更新频率低，可以把加载过的内容存在localStorage中做缓存，减少重复请求

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