咨询按用户访问时段动态加载网站内容的基础实现思路

嘿，这个场景其实挺贴合线下门店的线上需求的，基础实现思路分前端和后端两个方向，都很容易上手，给你拆解下：

前端侧快速实现（适合纯静态页面） #

这种方式不需要后端支持，直接在浏览器里完成判断，适合快速落地：

• 获取用户本地时间：用原生JavaScript的new Date()获取用户设备的本地时间，通过getHours()提取当前小时数（0-23）。
• 定义时段规则：比如提前约定「早间时段」为6:00-10:00，「晚间时段」为17:00-22:00，其他时段显示默认内容。
• 动态切换内容：可以提前把不同时段的内容（比如图片、菜品列表）写在页面里（默认隐藏），或者直接修改元素属性。举个修改图片的简单示例：

// 获取页面上的菜品展示图元素
const mealDisplayImg = document.getElementById('meal-display');
// 获取当前小时数
const currentHour = new Date().getHours();

// 根据时段切换图片
if (currentHour >= 6 && currentHour < 10) {
  mealDisplayImg.src = 'breakfast-dish.jpg';
  mealDisplayImg.alt = '今日早餐推荐';
} else if (currentHour >= 17 && currentHour < 22) {
  mealDisplayImg.src = 'dinner-dish.jpg';
  mealDisplayImg.alt = '今日晚餐推荐';
} else {
  // 非高峰时段显示餐厅招牌菜
  mealDisplayImg.src = 'signature-dish.jpg';
  mealDisplayImg.alt = '餐厅招牌推荐';
}

小提醒：这种方式依赖用户设备的本地时间，如果用户手动修改了系统时间，显示会不准确，但满足基础需求完全够用。

后端侧精准实现（适合需要联动业务逻辑的场景） #

如果需要和餐厅实际营业时间、库存等业务逻辑联动，或者想避免用户修改时间的影响，就用后端实现：

• 获取精准时间：后端直接使用服务器的系统时间（更可靠），如果需要匹配用户所在时区，可以通过请求头的Accept-Timezone字段或者让用户选择时区，转换为用户当地时间。
• 渲染页面时判断时段：在生成HTML页面的阶段，就根据时间判断好要展示的内容，直接输出给前端。举个Node.js（Express）的简单示例：

app.get('/', (req, res) => {
  const currentHour = new Date().getHours();
  let mealImg = 'signature-dish.jpg';
  let mealAlt = '餐厅招牌推荐';

  if (currentHour >= 6 && currentHour < 10) {
    mealImg = 'breakfast-dish.jpg';
    mealAlt = '今日早餐推荐';
  } else if (currentHour >= 17 && currentHour < 22) {
    mealImg = 'dinner-dish.jpg';
    mealAlt = '今日晚餐推荐';
  }

  // 渲染页面时传入对应的图片信息
  res.render('index', { mealImg, mealAlt });
});

这种方式的优势是时间完全可控，不会受用户本地设置影响，还能轻松结合后端的业务规则（比如周末调整早餐时段）。

额外小技巧 #

如果想让切换更平滑，可以给图片元素加transition: all 0.3s ease;的CSS样式，切换时不会太突兀。

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