Изменить цвет фона Div в зависимости от времени дня - PullRequest
Новая
       37

Изменить цвет фона Div в зависимости от времени дня

0 голосов
/ 01 марта 2020

Я использую следующий скрипт, но я хотел бы применить его только к первому разделу моего сайта, а не к телу. (следующий код работает, но он применяется в моем разделе #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";, но все равно это не работает.

Ответы [ 3 ]

1 голос
/ 01 марта 2020

Я не могу комментировать сообщение, поэтому я просто сделаю его ответом.

Вы ставите <script></script> на верхней части тела / головы? Если так, переместите это к основанию своего тела / после <div id="top">. Помещение сценария в верхнюю часть тела не будет работать, потому что <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>
1 голос
/ 01 марта 2020

Вместо document.write вы можете объявить переменную (color), установить цвет в зависимости от времени и установить цвет тела в результате. 

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);
}
0 голосов
/ 01 марта 2020

попробуйте что-то подобное в вашем CSS: 

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

и это в вашем JavaScript: 

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