Question

因此，我尝试使用javascript更改网站的背景颜色。我希望它在特定时间改变。但这似乎不起作用。我已经运行了每种组合，但是bg颜色始终保持CSS中描述的默认颜色。

JS代码似乎添加了新的代码行，而不是修改CSS。我怎么知道计算机将首先读取代码的哪一部分？是CSS优先还是内联代码/ HTML优先？ TIA

var now = new Date();
var hours = now.getHours();

//Keep in code - Written by Computerhope.com
//Place this script in your HTML heading section

document.write('It\'s now: ', hours, '<br><br>');
document.bgColor = "White";

//5am-7am morning
if (hours > 5 && hours < 7) {
  document.write('<body style="background-color: #FFF95D">');
}
//7am-12pm noon
else if (hours > 7 && hours < 12) {
  document.write('<body style="background-color: #B3E5FC">');
}
//12pm-4pm afternoon
else if (hours > 12 && hours < 16) {
  document.write('<body style="background-color: #7E57C2">');
}
//4pm-7pm evening
else if (hours > 16 && hours < 19) {
  document.write('<body style="background-color: #EF5444">');
}
//7pm-10pm Night
else if (hours > 19 && hours < 22) {
  document.write('<body style="background-color: #424242">');
}
//1opm-5am Nighting
else if (hours > 22 && hours < 7) {
  document.write('<body style="background-color: #000000">');
}

  body {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  max-width: 100%;
  height: 100%;
  color: #455A64;
  font-family: var(--fontFamily);
  font-size: var(--fontSizeMd);
  line-height: var(--lineHeightMd);

Answer 1

document.write（）基本上会在文档中添加新行代码，这就是html本身。这里的目的是仅更改主体的背景颜色属性。您可以使用例如：

document.write()

Answer 2

1）使用document.write()时，HTML文档已完全加载，将删除所有现有的HTML，因此请使用document.body.style.background更改正文的颜色。

2）要自动更改颜色，请使用setInterval。

3）将最后一行从else if (hours > 22 && hours < 7) {更改为else {，因为数字不大于22且小于7。

var el = document.getElementById('time');

(function(){
  setInterval(function(){
    var now = new Date();
    var hours = now.getHours();
    el.innerHTML = ('It\'s now: ' + hours + '<br><br>');
    //5am-7am morning
    if (hours > 5 && hours <= 7) { document.body.style.background ='#FFF95D'; }
    //7am-12pm noon
    else if (hours > 7 && hours <= 12) { document.body.style.background ='#B3E5FC'; }
    //12pm-4pm afternoon
    else if (hours > 12 && hours <= 16) { document.body.style.background = "#7E57C2"; }
    //4pm-7pm evening
    else if (hours > 16 && hours <= 19) { document.body.style.background = "#EF5444"; }
    //7pm-10pm Night
    else if (hours > 19 && hours <= 22) { document.body.style.background = "#424242"; }
    //1opm-5am Nighting
    else  { document.body.style.background = "#000000"; }
    },1000);
})();

var el = document.getElementById('time');

(function(){

  setInterval(function(){
	var now = new Date();
	var hours = now.getHours();
	el.innerHTML = ('It\'s now: ' + hours + '<br><br>');

	//5am-7am morning
	if (hours > 5 && hours <= 7) { document.body.style.background ='#FFF95D'; }
	//7am-12pm noon
	else if (hours > 7 && hours <= 12) { document.body.style.background ='#B3E5FC'; }
	//12pm-4pm afternoon
	else if (hours > 12 && hours <= 16) { document.body.style.background = "#7E57C2"; }
	//4pm-7pm evening
	else if (hours > 16 && hours <= 19) { document.body.style.background = "#EF5444"; }
	//7pm-10pm Night
	else if (hours > 19 && hours <= 22) { document.body.style.background = "#424242"; }
	//1opm-5am Nighting
	else { document.body.style.background = "#000000"; }

	},1000);
  
})();

body {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  max-width: 100%;
  height: 100%;
  color: #455A64;
  font-family: var(--fontFamily);
  font-size: var(--fontSizeMd);
  line-height: var(--lineHeightMd);
}

<span id="time"></span>

您可以像这样使用switch代替else if：

var el = document.getElementById('time');

(function(){

  setInterval(function(){
    var now = new Date();
    var hours = now.getHours();
    el.innerHTML = ('It\'s now: ' + hours + '<br><br>');

    switch(true) {
        case (hours > 5 && hours <= 7):
          document.body.style.background ='#FFF95D';
          break;
        case (hours > 7 && hours <= 12):
          document.body.style.background ='#B3E5FC';
          break;
        case (hours > 12 && hours <= 16):
          document.body.style.background = "#7E57C2";
          break;
        case (hours > 16 && hours <= 19):
          document.body.style.background = "#EF5444";
          break;
        case (hours > 19 && hours <= 22):
          document.body.style.background = "#424242";
          break;
        default:
          document.body.style.background = "#000000";
      }

    },1000);

})();

Answer 3

代替这种尝试。

在javascript中：代替Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource这样做

import string
def capitalize_names(lst_str):
    return map(string.capitalize, lst_str)

if __name__ == '__main__':
    print capitalize_names(["HArry", "jack", "JAMES"])
    # ['Harry', 'Jack', 'James']

Answer 4

您应该使用它而不是document.write：

document.body.style.backgroundColor = "some_color";

其中some_color是您选择的颜色之一

Answer 5

当您在javascript中提供样式以覆盖以前指定的背景色时，请使用！important属性。例如：style ='background-color：#fff！important'

Answer 6

如果您只想更改主体的颜色，请使用document.body.style.backgroundColor或document.bgColor

document.bgColor获取或设置当前文档的背景颜色。

write()方法将HTML表达式或JavaScript代码写入文档。

write()方法主要用于测试：如果在HTML文档完全加载后使用，它将删除所有现有的HTML。

var now = new Date();
var hours = now.getHours();

//Keep in code - Written by Computerhope.com
//Place this script in your HTML heading section

document.write('It\'s now: ', hours, '<br><br>');
document.bgColor = 'white';

//5am-7am morning
if (hours > 5 && hours < 7) {
 document.body.style.backgroundColor = '#FFF95D';
}
//7am-12pm noon
else if (hours > 7 && hours < 12) {
  document.body.style.backgroundColor = '#B3E5FC';  
}
//12pm-4pm afternoon
else if (hours > 12 && hours < 16) {
  document.body.style.backgroundColor = '#7E57C2';
}
//4pm-7pm evening
else if (hours > 16 && hours < 19) {
  document.body.style.backgroundColor = '#EF5444';
}
//7pm-10pm Night
else if (hours > 19 && hours < 22) {
  document.body.style.backgroundColor = '#424242';
}
//1opm-5am Nighting
else if (hours > 22 && hours < 7) {
  document.body.style.backgroundColor = '#000000';
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  max-width: 100%;
  height: 100%;
  color: #455A64;
  font-family: var(--fontFamily);
  font-size: var(--fontSizeMd);
  line-height: var(--lineHeightMd);
}

Answer 7

您正在尝试在其边界时间运行此代码。例如在12点在（hours <12）和（hours> 12）这两个条件下都不令人满意，因此将“ <=”代替<< / p>

尝试以下代码：

 <script type="text/javascript">
        var now = new Date();
        var hours = now.getHours();

        //Keep in code - Written by Computerhope.com
        //Place this script in your HTML heading section

        document.write('It\'s now: ', hours, '<br><br>');
        document.bgColor = "White";

        //5am-7am morning
        if (hours > 5 && hours <= 7) {
          document.write('<body style="background-color: #FFF95D">');
        }
        //7am-12pm noon
        else if (hours > 7 && hours <= 12) {
          document.write('<body style="background-color: #B3E5FC">');
        }
        //12pm-4pm afternoon
        else if (hours > 12 && hours <= 16) {
          document.write('<body style="background-color: #7E57C2">');
        }
        //4pm-7pm evening
        else if (hours > 16 && hours <= 19) {
          document.write('<body style="background-color: #EF5444">');
        }
        //7pm-10pm Night
        else if (hours > 19 && hours <= 22) {
          document.write('<body style="background-color: #424242">');
        }
        //1opm-5am Nighting
        else if (hours > 22) {
          document.write('<body style="background-color: #000000">');
        }
        </script>

我正在尝试使用Javascript更改CSS元素，但无法正常工作

7 个答案: