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

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

我对脚本做了一些改动。

1. 我已经从 dom (HTML) 中删除了您的所有 onload 调用，您的 HTML 先于 javascript 加载，因此最初这些功能不可用。

2. 在菜单上添加了 id="nav_menu"。

并更改以下代码。

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();

希望对你有帮助！！！

Answer 2

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

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

希望对你有帮助。