如何根据当前时段动态更改网站背景图片/颜色？

嘿，这个根据时段切换背景的点子真的很赞，能给你的高校项目增添不少氛围感！我来分享一个简单又实用的实现方案，纯前端就能搞定，不用后端介入。

核心思路 #

其实逻辑很直接：

• 拿到当前系统时间的小时数
• 根据预设的时段区间，匹配对应的背景渐变样式
• 将样式应用到页面的全屏容器（比如body或者专门的背景层）
• 加个定时任务，每隔一段时间自动检查时间，避免页面长时间打开后不更新

完整代码实现 #

我直接给你写好可运行的代码，你可以直接套用，按需修改渐变值就行：

HTML 结构 #

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>动态背景示例</title>
  <style>
    /* 先给body设置全屏基础样式，加上过渡让切换更平滑 */
    body {
      margin: 0;
      min-height: 100vh;
      transition: background 1s ease-in-out; /* 渐变切换的动画效果 */
    }
  </style>
</head>
<body>
  <!-- 你的页面内容放在这里 -->
  <script>
    // 定义时段与背景渐变的映射表，你可以随意新增/修改时段和样式
    const timeBackgroundMap = [
      { start: 7, end: 13, gradient: 'linear-gradient(to bottom, yellow 0%, red 100%)' },
      { start: 13, end: 18, gradient: 'linear-gradient(to bottom, #003366 0%, #000d1a 100%)' },
      // 其余时段（18:00-次日7:00）的样式，你可以自己替换成想要的渐变
      { start: 18, end: 7, gradient: 'linear-gradient(to bottom, #1a1a2e 0%, #16213e 100%)' }
    ];

    // 获取当前应该使用的背景渐变
    function getCurrentGradient() {
      const currentHour = new Date().getHours();
      for (const item of timeBackgroundMap) {
        // 处理跨午夜的时段（比如18点到次日7点）
        if (item.start < item.end) {
          if (currentHour >= item.start && currentHour < item.end) {
            return item.gradient;
          }
        } else {
          if (currentHour >= item.start || currentHour < item.end) {
            return item.gradient;
          }
        }
      }
      // 默认 fallback 样式，防止意外情况
      return 'linear-gradient(to bottom, #ffffff 0%, #eeeeee 100%)';
    }

    // 应用背景样式到body
    function applyBackground() {
      document.body.style.background = getCurrentGradient();
    }

    // 页面加载时立即应用背景
    applyBackground();

    // 每隔1分钟检查一次时间，更新背景（避免页面一直开着过了时段没切换）
    setInterval(applyBackground, 60 * 1000);
  </script>
</body>
</html>

额外优化建议 #

• 更丝滑的过渡：我已经加了transition: background 1s ease-in-out，你可以调整时间或者动画曲线，让切换更自然
• CSS变量维护：可以把渐变值存在CSS变量里，比如:root { --morning-gradient: ... }，然后JS里直接修改变量，这样样式和逻辑分离，维护更方便
• 时区适配：如果你的项目面向不同时区的用户，可以考虑用服务器时间代替本地时间，但高校项目一般用本地时间就够了
• 自定义时段：timeBackgroundMap可以随意扩展，比如增加傍晚、深夜的不同样式，完全按你的需求来

内容的提问来源于stack exchange，提问作者João Antônio