根据一天中的时间更改 Div 背景颜色

Question

我正在使用以下脚本，但我只想将它应用到我网站的第一部分而不是正文。（以下代码有效，但适用于我的 #top 部分）。

<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="#CC9900";
  //18-19 night
  if (hours > 17 && hours < 20){
   document.write ('<body style="background-color: orange">');
  }
  //20-21 night
  else if (hours > 19 && hours < 22){
   document.write ('<body style="background-color: orangered">');
  }
  //22-4 night
  else if (hours > 21 || hours < 5){
   document.write ('<body style="background-color: #C0C0C0;">');
  }
  //9-17 day
  else if (hours > 8 && hours < 18){
   document.write ('<body style="background-color: #616D7E">');
  }
  //7-8 day
  else if (hours > 6 && hours < 9){
   document.write ('<body style="background-color: skyblue">');
  }
  //5-6 day
  else if (hours > 4 && hours < 7){
   document.write ('<body style="background-color: steelblue">');
  }
  else {
   document.write ('<body style="background-color: white">');
  }
</script>

HTML部分：

<section class="full-height section-scroll" id="top">
  <div class="os-animation" data-os-animation="fadeInUp" data-os-animation-delay="0s">
    <section class="intro-top">
      <h1>This is my H1</h1>
    </section>
</section>

和 CSS:

#top {
  height: 100vh;
  -webkit-transition: background-color 700ms linear;
     -moz-transition: background-color 700ms linear;
      -ms-transition: background-color 700ms linear;
       -o-transition: background-color 700ms linear;
          transition: background-color 700ms linear;
  background-color: rgba(253, 208, 7, 1);
  justify-content: center;
}

#top.scrolled {
  background-color: transparent
}

我已经尝试将 document.write ('<body style="background-color: orange">'); 更改为 document.getElementById("top").style.backgroundColor = "orange";，但仍然无效。

Answer 1

您可以声明一个变量 (color)，而不是 document.write，根据时间设置颜色并设置正文的颜色作为结果。

var now = new Date();
now.setHours(23);
var hours = now.getHours();
let color;
//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="#CC9900";
//18-19 night
if (hours > 17 && hours < 20){
 color = "orange";
}
//20-21 night
else if (hours > 19 && hours < 22){
 color = "orangered";
}
//22-4 night
else if (hours > 21 || hours < 5){
 color = "#C0C0C0";
}
//9-17 day
else if (hours > 8 && hours < 18){
 color = "#616D7E";
}
//7-8 day
else if (hours > 6 && hours < 9){
 color = "skyblue";
}
//5-6 day
else if (hours > 4 && hours < 7){
 color = "steelblue";
}
else {
 color = "white";
}

document.body.style.color = color

或者您可以使用 css 变量

var now = new Date();
now.setHours(18);
var hours = now.getHours();
let color;
//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="#CC9900";
//18-19 night
if (hours > 17 && hours < 20){
 color = "orange";
}
//20-21 night
else if (hours > 19 && hours < 22){
 color = "orangered";
}
//22-4 night
else if (hours > 21 || hours < 5){
 color = "#C0C0C0";
}
//9-17 day
else if (hours > 8 && hours < 18){
 color = "#616D7E";
}
//7-8 day
else if (hours > 6 && hours < 9){
 color = "skyblue";
}
//5-6 day
else if (hours > 4 && hours < 7){
 color = "steelblue";
}
else {
 color = "white";
}

document.body.style.setProperty('--color', color);

body {
  color: var(--color);
}

Answer 2

在你的 CSS:

中尝试这样的事情

.red {background : red}
.orangered {background : orangered}

还有你的 JavaScript:

if(hours 19 && hours < 22) {
 document.getElementById("top").className = 'orangered';
}

Answer 3

我无法对 post 发表评论，所以我将其作为答案。

你是把 <script></script> 放在 body / 头的上面吗？如果是这样，请将其移至 body/<div id="top"> 之后的底部。将脚本放在 body 的头部/顶部将不起作用，因为 <script> 在呈现 <div id="top"> 之前正在执行。

你的代码对我来说工作正常，试试这个：

<html>
<head>
    <style>
        #top {
            height: 100vh;
            -webkit-transition: background-color 700ms linear;
            -moz-transition: background-color 700ms linear;
            -ms-transition: background-color 700ms linear;
            -o-transition: background-color 700ms linear;
            transition: background-color 700ms linear;
            background-color: rgba(253, 208, 7, 1);
            justify-content: center;
        }

        #top.scrolled {
            background-color: transparent
        }
    </style>
</head>

<body>
    <section class="full-height section-scroll" id="top">
        <div class="os-animation" data-os-animation="fadeInUp" data-os-animation-delay="0s">
            <section class="intro-top">
                <h1>This is my H1</h1>
            </section>
    </section>

    <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 = "#CC9900";

        //hours = 4; Just for testing

        //18-19 night
        if (hours > 17 && hours < 20) {
            document.getElementById("top").style.backgroundColor = "orange"
        }
        //20-21 night
        else if (hours > 19 && hours < 22) {
            document.getElementById("top").style.backgroundColor = "red"
        }
        //22-4 night
        else if (hours > 21 || hours < 5) {
            document.getElementById("top").style.backgroundColor = "#C0C0C0";
        }
        //9-17 day
        else if (hours > 8 && hours < 18) {
            document.getElementById("top").style.backgroundColor = "#616D7E";
        }
        //7-8 day
        else if (hours > 6 && hours < 9) {
            document.getElementById("top").style.backgroundColor = "skyblue";
        }
        //5-6 day
        else if (hours > 4 && hours < 7) {
            document.getElementById("top").style.backgroundColor = "steelblue";
        } else {
            document.getElementById("top").style.backgroundColor = "white";
        }
    </script>
</body>

</html>

根据一天中的时间更改 Div 背景颜色

Change Div Background-color based on time of the day

javascript

if-statement

getelementbyid

document.write

background-color