Изменение фона раздела в зависимости от времени

Question

Первый раздел моего сайта содержит картинку. Я хочу, чтобы картина менялась в зависимости от местного времени. Например, с 6 до 18 часов будет отображаться «дневная картинка», а в остальное время - «ночная картинка». В моем файле CSS есть два класса, один из которых называется Днем, а другой ночью:

    .day {
           background-image: url("./css/images/daymode.jpg");
           background-size: cover;
}
.night {
         background-image: url("./css/images/nightmode.jpg");
         background-size: cover;
}

Это раздел HTML. Я хочу изменить его фон:

    <section class="home-section section-hero overlay slanted" id="home-section">

это мой JavaScript файл:

    $(document).ready(function() {
  var d = new Date();
  var n = d.getHours();
  if (n > 18 || n < 6)
    // If time is after 7PM or before 6AM, apply night theme to ‘body’
    document.body.className = "night";
  if (n > 6 && n < 18) document.body.className = "day";
});

Я не могу понять, как поместить эти дневные и ночные классы в один и тот же класс элемента section, чтобы он распознал их, и я могу управлять им с помощью js файл.

Любая помощь будет оценена! :)

Answer 1

Поскольку у вас есть идентификатор для элемента section, вы можете сделать это проще:

var section = document.getElementById('home-section');
var period;
// your logic to define whether it's day or night, and it's set to 'period'

// then, remove previous set classes
section.classList.remove('day');
section.classList.remove('night');

// finally, set the recently defined period
section.classList.add(period);

Таким образом, поскольку оба ваших day и night класса имеют общее свойство background-size: cover, Вы можете переместить его в свои стили для правил #home-section css.

Answer 2

Вы близки, но если вы хотите нацелиться только на изменение фона в своем разделе, то вам нужно немного изменить селекторы CSS. В то время как вы МОЖЕТЕ иметь классы «дневной» и «ночной», проще иметь стандартную, а затем переопределенную тему «ночной».

Поскольку вы уже используете $(document).ready, я ' Я предполагаю, что вы включили jQuery, поэтому я изменил вашу функцию, чтобы воспользоваться этим и сохранить все дополнительные классы, которые могли уже присутствовать в теле.

$(document).ready(function() {
  $('body').toggleClass('night',IsNight());
  setInterval(function(){
    $('body').toggleClass('night',IsNight());
  },60000);
});

function IsNight()
{
  var d = new Date();
  var n = d.getHours();
  return (n >= 18 || n < 6);
}

#home-section {
  background-image: url("./css/images/daymode.jpg");
  background-size: cover;
}

.night #home-section {
  background-image: url("./css/images/nightmode.jpg");
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="home-section section-hero overlay slanted" id="home-section">blah</section>

Это то же самое, слегка измененное, чтобы вам не приходилось ждать день / ночь. Вместо этого он меняется каждую секунду и использует цвет вместо background-iamge.

$(document).ready(function() {
  setInterval(function(){
    $('body').toggleClass('night');  
  },1000);
});

#home-section {
  background-image: url("./css/images/daymode.jpg");
  background-size: cover;
  color: yellow;
}

.night #home-section {
  background-image: url("./css/images/nightmode.jpg");
  color: black;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="home-section section-hero overlay slanted" id="home-section">blah</section>

Answer 3

Вы можете использовать if{..}else{..}

для вашего понимания. Я установил время суток, когда вы можете его комментировать, и установите текущее время

var d = new Date('Thu Feb 20 2020 07:35:09 GMT+0530 ');

//var d = new Date();

var n = d.getHours();

if (n > 18 || n < 6) {
  // If time is after 7PM or before 6AM, apply night theme to ‘body’
  document.body.className = "night";
} else {
  document.body.className = "day";
}

.day {
  background-image: url("./css/images/daymode.jpg");
  background-size: cover;
  background-color: orange;
}

.night {
  background-image: url("./css/images/nightmode.jpg");
  background-size: cover;
  background-color: black;
}