Как автоматически сменять фон в зависимости от месяца?

@Alfinavi · Регистрация: 09.08.2012

Author24 — интернет-сервис помощи студентам

Всем добрый день! У меня стоит такая задача - мне нужно, чтобы в зависимости от месяца был тот или иной фон. А еще лучше указывать дни. К примеру, с 25 декабря по 20 января я бы хотел, чтобы на моём сайте автоматически сменился фон на "новогодний", изображение которого залито в папку и располагается на сервере естественно.

Вот мой код, который сейчас реализует фон на странице:

CSS

body{
    background-image:url("images/bg1.jpg");
    background-repeat:no-repeat;
    background-attachment:fixed;
    webkit-background-size: cover;
    moz-background-size: cover;
    o-background-size: cover;
    background-size: cover;
    
    -ms-user-select: none; 
    -moz-user-select: none; 
    -webkit-user-select: none; 
    user-select: none; 
}

Этот код располагается на каждой странице моего сайта. Возможно, нужно поменять код, запихнув этот в css стили, а на каждой странице как-то указать, чтобы фон брался из кода файла css стилей. Чтобы достаточно было изменить код в одном файле и фон изменится во всех. В общем, помогите пожалуйста решить эту проблему.

Добавлено через 1 час 35 минут
Переместил код в стили:

CSS

body{
    background-image: url("/images/bg1.jpg");
    background-repeat:no-repeat;
    background-attachment:fixed;
    webkit-background-size: cover;
    moz-background-size: cover;
    o-background-size: cover;
    background-size: cover;
    
    -ms-user-select: none; 
    -moz-user-select: none; 
    -webkit-user-select: none; 
    user-select: none; 
}
 
.container {    
        background-image: url("/images/fon.png");   
        width: 850px;
        height: 40000px;
        background-attachment:fixed;
        margin: auto;
        border: 2.5px solid black;
        background-repeat:no-repeat;        
        padding: 10px; 
        margin-bottom: 13px;
        webkit-background-size: cover;
        moz-background-size: cover;
        o-background-size: cover;
        background-size: cover;
        border-radius: 30px;
    }

Все работает. Чтобы лишний раз каждую страницу не загромождать кодом.

@Пифагор · 15.05.2017, 17:34

Сообщение от Alfinavi

У меня стоит такая задача - мне нужно, чтобы в зависимости от месяца был тот или иной фон

Нет необходимости обращаться к CSS-файлу. Можно через switch-case:

Javascript

var date = new Date();
switch(date.getMonth()){
  case 0:  document.body.style.backgroundImage = 'url(путь до картинки)'; break;
  case 1:  document.body.style.backgroundImage = 'url(путь до картинки)'; break;
  case 2:  document.body.style.backgroundImage = 'url(путь до картинки)'; break;
  case 3:  document.body.style.backgroundImage = 'url(путь до картинки)'; break;
  case 4:  document.body.style.backgroundImage = 'url(путь до картинки)'; break;
  case 5:  document.body.style.backgroundImage = 'url(путь до картинки)'; break;
  case 6:  document.body.style.backgroundImage = 'url(путь до картинки)'; break;
  case 7:  document.body.style.backgroundImage = 'url(путь до картинки)'; break;
  case 8:  document.body.style.backgroundImage = 'url(путь до картинки)'; break;
  case 9:  document.body.style.backgroundImage = 'url(путь до картинки)'; break;
  case 10: document.body.style.backgroundImage = 'url(путь до картинки)'; break;
  case 11: document.body.style.backgroundImage = 'url(путь до картинки)'; break;
  default: document.body.style.backgroundImage = 'url(путь до дефолтной картинки)'; break;
}

Поместите код в отдельный файл и подключайте на нужных страницах.

@Alfinavi · 16.05.2017, 22:20 **[ТС]**

Я реализовал это таким способом:

Javascript

function setNewYearBg() {
  var now = new Date(),
      month = now.getMonth(),
      day = now.getDate(),   
  if( (month == 11 && day >=27) || (month == 0 && day <= 17) ) {            
            document.body.classList.add('newyear_sunset');      
  }
  else if( (month == 0 && day >=18) || (month == 1 && day <= 22) ) {
    document.body.classList.add('winter');
  }

В CSS стиле:

CSS

1
2
3

body.winter {
  background-image: url("/images/fon/1.jpg");   
}

Ну и так для каждого.

Все работает отлично! Но, я решил добавить еще часы и минуты:

Javascript

function setNewYearBg() {
  var now = new Date(),
      month = now.getMonth(),
      day = now.getDate(),
      hours = now.getHours(),
      minutes = now.getMinutes();
  if( (month == 11 && day >=27) || (month == 0 && day <= 17) ) {    
        if(hours >= 17 && minutes >= 20) || (hours <= 8 && minutes <= 29 ) {
            document.body.classList.add('newyear_night');
        }
        else if(hours >= 8 && minutes >= 30) || (hours <= 9 && minutes <= 59 ) {
            document.body.classList.add('newyear_sunrise');
        }  
        else if(hours >= 10 && minutes >= 00) || (hours <= 16 && minutes <= 29 ) {
            document.body.classList.add('newyear_day');
        } 
        else if(hours >= 16 && minutes >= 30) || (hours <= 17 && minutes <= 19 ) {
            document.body.classList.add('newyear_sunset');
        } 
  }
  else if( (month == 0 && day >=18) || (month == 1 && day <= 22) ) {
    document.body.classList.add('winter');
  }

И теперь почему то белый фон, когда я проверяю меняя локальную дату на, к примеру, 20 февраля, т.е. попадая во второе условие. Даже если ошибка в первом условии, куда я добавил часы и минуты, то почему он его мимо не пройдет? Ведь дата не удовлетворяет условиям первого if. Как только убираю if с часами и минутами - всё снова работает. В чём может быть проблема?

Добавлено через 1 час 29 минут
проблема решена! Забыл поставит скобки в условиях с часами и минутами:

Javascript

1	if ( (hours >= 17 && minutes >= 20) \|\| (hours <= 8 && minutes <= 29 ) ) {

	16.05.2017, 22:20

Как автоматически сменять фон в зависимости от месяца?

Решение