能否根据时间切换网页背景色？我的JavaScript代码失效求助

嘿，我看了你的代码，作为前端新手能想到根据时间做动态效果已经很棒啦！现在代码跑不起来主要有几个小问题，咱们一步步来修正：

问题分析 #

先说说你代码里的几个核心问题：

• 函数未执行：第一个init函数里的setBackgroundForTimeOfDay完全没被调用，而且init本身也没触发；
• 元素未获取：init1里直接用ul，但你没通过document.querySelector('ul')获取这个元素，浏览器会报错找不到ul；
• 条件逻辑错误：你的if判断没有用else if，最后一个else会覆盖前面的设置，导致时间判断失效；
• CSS属性误用：渐变背景应该用background属性，而不是background-color——background-color只能设置纯色，渐变是属于background的复合属性。

修正后的完整代码 #

我把你的代码重构了一下，合并了重复逻辑，修复了所有问题：

// 封装通用的设置渐变背景函数
function setGradientBackground(element, gradient) {
  element.style.background = gradient;
}

function setBackgroundForTimeOfDay() {
  const body = document.querySelector('body');
  const ul = document.querySelector('ul'); // 确保页面上存在ul元素
  const hours = new Date().getHours();
  let bodyGradient, ulGradient;

  // 根据时间段设置不同渐变
  if (9 <= hours && hours <= 12) {
    bodyGradient = 'linear-gradient(to right, rgb(39, 38, 38), rgb(96, 231, 255), rgb(39, 38, 38))';
    ulGradient = 'linear-gradient(to right, rgb(39, 38, 38), rgb(96, 231, 255), rgb(39, 38, 38))';
  } else if (hours > 12 && hours <= 15) {
    bodyGradient = 'linear-gradient(to right, rgb(39, 38, 38), rgb(96, 255, 207), rgb(39, 38, 38))';
    ulGradient = 'linear-gradient(to right, rgb(39, 38, 38), rgb(96, 255, 207), rgb(39, 38, 38))';
  } else {
    // 其他时间段的默认渐变，你可以根据需求修改
    bodyGradient = 'linear-gradient(to right, rgb(39, 38, 38), rgb(68, 68, 68), rgb(39, 38, 38))';
    ulGradient = 'linear-gradient(to right, rgb(39, 38, 38), rgb(68, 68, 68), rgb(39, 38, 38))';
  }

  // 设置背景
  setGradientBackground(body, bodyGradient);
  if (ul) { // 先判断ul是否存在，避免页面无ul时报错
    setGradientBackground(ul, ulGradient);
  }
}

// 页面加载完成后立即执行，之后每分钟更新一次
window.addEventListener('DOMContentLoaded', () => {
  setBackgroundForTimeOfDay();
  setInterval(setBackgroundForTimeOfDay, 60000); // 每分钟检查一次时间
});

关键改进点 #

• 合并重复逻辑：把设置背景的逻辑封装成通用函数，避免冗余代码；
• 正确获取元素：明确获取ul元素，并且增加存在性判断，防止报错；
• 修复条件判断：用else if替代多个独立if，保证时间逻辑正常生效；
• 使用正确CSS属性：用background代替background-color来设置渐变效果；
• 页面加载触发：通过DOMContentLoaded事件确保DOM加载完成后再执行代码，避免找不到元素的问题。

额外测试小技巧 #

如果你想快速测试不同时间段的效果，可以临时把const hours = new Date().getHours();改成固定值，比如const hours = 10;，这样就能直接看到上午的背景效果啦！

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