Question

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

这是我的脚本，但我的页面上没有显示任何内容。我是JavaScript新手。你能解释一下是什么错吗？

＆＃13;

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";
}

＆＃13;

Answer 1

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

更正后的代码：

＆＃13;

<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>

＆＃13;

Answer 2

为你完成作业：）

＆＃13;

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";
}

＆＃13;

查看有关javaScript Date()

中https://www.w3schools.com/jsref/jsref_gethours.asp函数的更多信息

Answer 3

这是一个简单的模型。

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

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

稍微努力一点，你甚至可以在白天在颜色之间进行补间。

我还删除了document.write，这种不良做法尝试不使用。在这里，我在div上使用querySelector来显示文字。

＆＃13;

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

＆＃13;

.hello {
  font-size: 4em;
}

＆＃13;

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

＆＃13;

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
}

在JavaScript中更改一天中不同时段的背景颜色？

5 个答案: