Блог

Я хочу изменить фоновое изображение в течение определенной части дня, используя JavaScript. Итак, я хочу с 6:00 до 20:00 дневной пиктограммы и с 20-06 ночной пиктограммы. Я изучаю JS последние пару месяцев, поэтому я совершенно новичок в этом.Я также создал часы.

Я пробовал последние дни с помощью Google it, по-прежнему ничего, никакого решения. Пожалуйста, помогите.

Мой html :

 
<div class="banner">

<div class="image-day" id="img-day"></div>        
<div class="image-night" id="img-night"></div>

</div>

 

CSS:

 .banner {
   min-height: 100vh;
   position: relative;
   display: grid;
   place-items: center;
   text-align: center;
  }


.image-day {
   position: absolute;
   background: url(../images/bluesky.jpg)no-repeat center center/cover;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   
   
}



.image-night {
   position: absolute;
   background: url(../images/nightime.jpg)no-repeat center center/cover;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   }
 

Часы JS :

 setInterval(displayClock, 500)


function displayClock() {
   var time = new Date();

   var hrs = time.getHours();
   var min = time.getMinutes();
   var sec = time.getSeconds();

   if (hrs > 12) {
       hrs = hrs   0;
   }


   if (hrs == 0) {
       hrs = 12;
   }


   if(hrs < 10) {
       hrs = '0'   hrs;
   }

   if (min < 10) {
       min = '0'   min;
   }

   if (sec < 10) {
       sec = '0'   sec;
   }

   document.getElementById('clock').innerHTML = hrs   ':'   min   ':'   sec;


}

 

Вы можете изменить свойства css элемента dom, используя свойство style, например :

 <DOM element>.style.<css property> = <value>
 

В вашем случае для изменения фонового изображения вы можете использовать что-то вроде этого :

 document.querySelector(".banner").style.backgroundImage="url('../images/nightime.jpg')"
 

Поскольку метод отображения часов уже выполняется каждые 5 секунд, вы можете добавить следующее, чтобы проверить, больше ли часов 6 и меньше 20

 if(time.getHours()>=6amp;amp;time.getHours()<20)
    {
      document.querySelector(".banner").style.backgroundImage="url('../images/bluesky.jpg')";
    }else{
      document.querySelector(".banner").style.backgroundImage="url('../images/nightime.jpg')"
    }  
 

Найдите демо в этом ящике: demo . Откройте демонстрационную версию и попробуйте изменить системное время