如何根据时间段动态设置网站background-image实现背景自动切换

原有代码问题 #

• 代码中("backgrounds", "url('xxx.png')")仅通过逗号运算符返回了字符串，没有实际操作DOM样式，没有执行任何背景设置逻辑
• 最后一个分支错误在else后直接追加条件，else后不能接判断语句，需要使用else if或者直接留空走兜底逻辑
• 时间判断存在边界漏洞，n=6/n=8/n=18/n=20这类整点值没有匹配到任何对应分支
• 引用的图片路径有误，若图片存放在backgrounds文件夹下，需要把文件夹路径写进url参数里，不能单独作为一个逗号分隔的参数

正确实现代码 #

你可以直接给页面body元素设置背景样式，完整代码如下：

// 等待页面DOM加载完成后执行逻辑，避免找不到元素
document.addEventListener('DOMContentLoaded', () => {
  const currentHour = new Date().getHours();
  let bgImageUrl = '';

  // 按时间段匹配对应背景图，覆盖所有小时区间
  if (currentHour >= 20 || currentHour < 6) {
    // 20:00 ~ 次日5:59 深夜背景
    bgImageUrl = "url('backgrounds/midnight.png')";
  } else if (currentHour >= 6 && currentHour < 8) {
    // 6:00 ~ 7:59 日出背景
    bgImageUrl = "url('backgrounds/sunrise.png')";
  } else if (currentHour >= 8 && currentHour < 18) {
    // 8:00 ~ 17:59 日间背景
    bgImageUrl = "url('backgrounds/noon.png')";
  } else {
    // 18:00 ~ 19:59 日落背景
    bgImageUrl = "url('backgrounds/sunset.png')";
  }

  // 设置body的背景样式
  const bodyStyle = document.body.style;
  bodyStyle.backgroundImage = bgImageUrl;
  // 以下为可选的背景适配配置，可根据需求保留或删除
  bodyStyle.backgroundSize = 'cover';
  bodyStyle.backgroundPosition = 'center center';
  bodyStyle.backgroundRepeat = 'no-repeat';
  bodyStyle.minHeight = '100vh';
  bodyStyle.margin = 0;
});

注意事项 #

• 请根据你实际存放背景图片的路径修改url()内的地址，确保图片能被正常访问
• 如果需要给指定容器而非整个页面设置背景，把document.body替换为对应容器的DOM对象即可，比如通过document.querySelector('.your-container-class')获取目标元素

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