如何根据一天中的不同时间段调整页面元素的外观与内容

核心逻辑是通过原生JS获取当前时间的小时数，匹配对应时段后更新DOM元素的背景图属性和标题文本即可，无需引入额外依赖。

1. 基础HTML结构 #

<!-- 承载背景的容器元素 -->
<div id="time-based-container">
  <h1 id="time-heading"></h1>
</div>

2. 基础CSS样式 #

给背景容器加通用背景属性，保证背景图适配效果：

#time-based-container {
  width: 100vw;
  min-height: 100vh;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  /* 可选：加背景切换过渡效果更顺滑 */
  transition: background-image 0.6s ease-in-out;
}

3. 核心JS逻辑 #

// 提前获取目标DOM元素
const bgContainer = document.getElementById('time-based-container');
const timeHeading = document.getElementById('time-heading');
// 获取当前时间的小时数，返回值为0-23的整数
const currentHour = new Date().getHours();

// 配置不同时段对应的资源，可按需扩展下午、晚上等时段
const timeResourceMap = {
  morning: {
    bgImageUrl: '替换为你自己的早晨背景图路径',
    headingContent: '早上好，今天也要元气满满哦'
  }
}

// 时段判断逻辑
if (currentHour >= 6 && currentHour < 12) {
  // 匹配到6:00-12:00的早晨时段
  bgContainer.style.backgroundImage = `url(${timeResourceMap.morning.bgImageUrl})`;
  timeHeading.textContent = timeResourceMap.morning.headingContent;
}

// 可选：如果需要页面长时间停留时自动更新时段，加定时器每分钟检查一次
setInterval(() => {
  const latestHour = new Date().getHours();
  // 此处复用上面的时段判断逻辑即可
}, 60 * 1000)

如果你使用Vue/React等前端框架，只需把直接操作DOM的逻辑替换为修改对应响应式变量即可，核心时段判断逻辑完全通用。

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