在 JavaScript 中的不同时间更改背景颜色？ [关闭]

Question

如何在一天中的不同时间更改body 背景颜色？

这是我的脚本，但我的页面上没有显示任何内容。我对 JavaScript 真的很陌生。你能解释什么是错的吗？

var t = date("H");

if (t < "10") {
    console.log("Have a good morning!");
    document.body.style.backgroundColor = "yellow";
} elseif (t < "20") {
    console.log("Have a good day!");
    document.body.style.backgroundColor = "red";
} else {
    console.log("Have a good night!");
    document.body.style.backgroundColor = "blue";
}

Answer 1

为你做作业:)

var t = new Date().getHours();
if (t < 10) {
    document.write("Have a good morning!");
    document.body.style.backgroundColor="yellow";
} else if (t < 20) {
    document.write("Have a good evening!");
    document.body.style.backgroundColor="orange";
} else {
    document.write("Have a good night!");
    document.body.style.backgroundColor="grey";
}

查看更多关于 javaScript https://www.w3schools.com/jsref/jsref_gethours.asp 中的 Date() 函数的信息

Answer 2

这是一个简单的模型。

根据当地时间，它会改变背景颜色和文字。

我也做到了，所以它每分钟都会重新检查一次。因此，如果您保持页面打开，它会随着时间的变化而改变颜色。

多花点力气，你甚至可以在白天使它在颜色之间进行补间。

我还删除了document.write，这是不好的做法，尽量不要使用。在这里，我在 div 上使用 querySelector 来显示文本。

function updateBackground() {
  var 
    hr = (new Date()).getHours(),
    body = document.body,
    bstyle = body.style,    
    hello = document.querySelector(".hello");    
  if (hr < 10) {
    bstyle.backgroundColor = "yellow";
    bstyle.color = "black";
    hello.innerText = "Have a good morning";
  } else if (hr < 20) {
    bstyle.backgroundColor = "green";
    bstyle.color = "white";
    hello.innerText ="Have a good day!";
  } else {
    bstyle.backgroundColor = "black";
    bstyle.color = "white";
    hello.innerText = "Have a good night!";
  } 
}

setInterval(updateBackground, 1000 * 60);
updateBackground();

.hello {
  font-size: 4em;
}

<div class="hello"></div>

Answer 3

您的 JavaScript 中有几个问题。尝试在浏览器中打开控制台以获取一些有用的错误消息。

以下更正代码：

<script>
var t = new Date().getHours();

if (t < 10) {
    document.write("Have a good morning!");
} else if (t < 20) {
    document.write("Have a good day!");
} else {
    document.write("Have a good night!");
}
</script>

Answer 4

这是一个使用 jQuery 的简单示例。

$(function() {

  var current_date = new Date();
  var hour = current_date.getHours();

  if(hour < 10) {
    $('body').addClass('day');
  } else {
    $('body').addClass('midday');
  }

});

https://codepen.io/Pauloscorps/pen/BmBGoe

Answer 5

var x = new Date().getHours();

if(x < 10){
// add background for morning
}



else if(x > 10 && x < 19){
// add background for day
}

else if(x > 19){
// add background for Night
}