Question

https://jsfiddle.net/8x7p682z/

function init() {
  function setBackgroundForTimeOfDay() {
    const body = document.querySelector('body');
    const hours = new Date().getHours();

    if (9 <= hours && hours <= 12)
      body.style['background-color'] = 'linear-gradient(to right, rgb(39, 38, 38), rgb(96, 231, 255),rgb(39, 38, 38))';
      if (hours > 12 && hours <= 15)
      body.style['background-color'] = 'linear-gradient(to right, rgb(39, 38, 38), rgb(96, 255, 207),rgb(39, 38, 38))';
    else
      body.style['background-color'] = 'linear-gradient(to right, rgb(39, 38, 38), rgb(96, 255, 207),rgb(39, 38, 38))';
  }
}
  function init1() {
    function setBackgroundForTimeOfDay() {
      const body = document.querySelector('body');
      const hours = new Date().getHours();

      if (9 <= hours && hours <= 12)
        ul.style['background-color'] = 'linear-gradient(to right, rgb(39, 38, 38), rgb(96, 231, 255),rgb(39, 38, 38))';
        if (hours > 12 && hours <= 15)
        ul.style['background-color'] = 'linear-gradient(to right, rgb(39, 38, 38), rgb(96, 255, 207),rgb(39, 38, 38))';
      else
        ul.style['background-color'] = 'linear-gradient(to right, rgb(39, 38, 38), rgb(96, 255, 207),rgb(39, 38, 38))';
    }

  setBackgroundForTimeOfDay();
  setInterval(setBackgroundForTimeOfDay, 60000);
}

这些是我的代码。我编写了java脚本，根据用户的时间改变背景颜色和导航栏选择颜色。但它不起作用。你能帮我解决这个问题吗？我是个新手。

Answer 1

您必须根据自己的条件执行以下操作：

function init() {
  function setBackgroundForTimeOfDay() { 
    const body = document.querySelector('body');
    const hours = new Date().getHours();

    if (9 <= hours && hours <= 12) {
      body.style['background-color'] = 'linear-gradient(to right, rgb(39, 38, 38), rgb(96, 231, 255),rgb(39, 38, 38))';
    } else if (hours > 12 && hours <= 15) {
      body.style['background-color'] = 'linear-gradient(to right, rgb(39, 38, 38), rgb(96, 255, 207),rgb(39, 38, 38))';
    } else {
      body.style['background-color'] = 'linear-gradient(to right, rgb(39, 38, 38), rgb(96, 255, 207),rgb(39, 38, 38))';
    }
  }
}

function init1() {
  function setBackgroundForTimeOfDay() { // <-- Why do these functions have the same name
    const body = document.querySelector('body');
    const hours = new Date().getHours();

    if (9 <= hours && hours <= 12) {
      ul.style['background-color'] = 'linear-gradient(to right, rgb(39, 38, 38), rgb(96, 231, 255),rgb(39, 38, 38))';
    } else if (hours > 12 && hours <= 15) {
      ul.style['background-color'] = 'linear-gradient(to right, rgb(39, 38, 38), rgb(96, 255, 207),rgb(39, 38, 38))';
    } else {
      ul.style['background-color'] = 'linear-gradient(to right, rgb(39, 38, 38), rgb(96, 255, 207),rgb(39, 38, 38))';
    }
  }

  setBackgroundForTimeOfDay();
  setInterval(setBackgroundForTimeOfDay, 60000);
}

通常也可以使用括号来提高能见度（并在可用时使用[Tidy]按钮，因为它会自动正确缩进代码）

文档：https://www.w3schools.com/js/js_if_else.asp

希望它有所帮助。

Answer 2

我在剧本中做了一些更改。

我已经从你的HTML加载的dom（HTML）中删除了所有的onload调用，而不是javascript，所以最初的函数不可用。
添加了id =＆＃34; nav_menu＆＃34;在菜单上。

并更改以下代码。

function init() {
  const body = document.querySelector('body');
  const hours = new Date().getHours();
  const ul = document.getElementById('nav_menu')

  if (9 <= hours && hours <= 12) {
    body.style['background-image'] = 'linear-gradient(to right, rgb(39, 38, 38), rgb(96, 231, 255),rgb(39, 38, 38))';
    changeMenuColor('linear-gradient(to right, rgb(39, 38, 38), rgb(96, 231, 255),rgb(39, 38, 38))');
  } else if (hours > 12 && hours <= 15) {
    body.style['background-image'] = 'linear-gradient(to right, rgb(39, 38, 38), rgb(96, 255, 207),rgb(39, 38, 38))';
    changeMenuColor('linear-gradient(to right, rgb(39, 38, 38), rgb(96, 255, 207),rgb(39, 38, 38))');
  } else
    body.style['background-image'] = 'linear-gradient(to right, rgb(39, 38, 38), rgb(96, 255, 207),rgb(39, 38, 38))';
  changeMenuColor('linear-gradient(to right, rgb(39, 38, 38), rgb(96, 255, 207),rgb(39, 38, 38))');
}

function changeMenuColor(color) {
  elements = document.getElementsByClassName('navbar-menu');
  for (var i = 0; i < elements.length; i++) {
    elements[i].querySelector('a').style['background-image'] = 'linear-gradient(to right, rgb(39, 38, 38), rgb(96, 255, 207),rgb(39, 38, 38))';
  }
}

init();

希望它有所帮助!!!

是否可以根据时间更改网页的背景颜色？

2 个答案: