Автоматическая смена шапки сайта (JavaScript)

Представленные в этой статье скрипты автоматически изменяют шапку сайта, в зависимости от периода времени. Для работы скриптов обязательным является наличие id в div, который содержит изображение-шапку: id="header".

Смена шапки, в зависимости от сезона

В данном скрипте шапка автоматически изменяется в зависимости от сезона - зима, весна, лето, осень.

function cHeader() {

 var d = new Date(); // определяем текущую дату
 var month = d.getMonth(); // и месяц
 var spring = [2,3,4];
 var summer = [5,6,7];
 var autmn = [8,9,10];
 var winter = [11,0,1];
 var header = document.getElementById("header");

 for (i=0;i<3;i++) {
  if (spring[i]==month) { // адрес шапки для весны
   header.style.backgroundImage='url(images/spring.jpg)'; 
  } 
  else
  if (summer[i]==month) { // для лета
   header.style.backgroundImage='url(images/summer.jpg)';  
  } 
  else
  if (autmn[i]==month) { // для осени
   header.style.backgroundImage='url(images/autmn.jpg)'; 
  }
  else 
  if (winter[i]==month) { // для зимы
   header.style.backgroundImage='url(images/winter.jpg)'; 
  }
 }
  
}
cHeader();

Смена шапки, в зависимости от числа месяца

Данный скрипт реализует смену шапки сайта, в данном примере это период с 4 по 6 числа каждого месяца.

function cHeader() {
var d = new Date(); // текущая дата
var e = d.getDate(); // число
var header = document.getElementById("header");

 for (i=4;i<7;i++) { // указанный период времени для смены шапки
  
  if (e==i) { // где в названии файла изображения конечная цифра совпадает с датой 
   header.style.backgroundImage='url(images/image'+i+'.jpg)' // например для 6 числа это image6.jpg
  }

 }
}
cHeader();

Примечание: если в указанный период планируется показывать одно и тоже изображение, то в строчке header.style.backgroundImage = 'url(images/image'+i+'.jpg)' удаляем переменную i: header.style.backgroundImage = 'url(images/image.jpg)'
Если планируется смена шапки сайта в определенные числа месяца (но не последовательные, или последовательные с перерывом), например, менять шапку сайта 1 и 15 числа, то можно использовать следующий скрипт:

function cHeader() {
var d = new Date();
var e = d.getDate();
var header = document.getElementById("header");
 switch(e) {
  case 1:
  header.style.backgroundImage = 'url(images/image1.jpg)'; // шапка для первого числа
  break;
 
  case 15:
  header.style.backgroundImage = 'url(images/image15.jpg)'; // для пятнадцатого
  break;
 
  default:
  header.style.backgroundImage = 'url(images/header.jpg)'; // повседневная
}

}
cHeader();

Смена шапки, в зависимости от дня недели

Данный скрипт меняет шапку сайта в определенные дни недели. В примере скрипта используются два изображения - повседневное и для выходных дней:

  
function cHeader() {
var d=new Date();
var dWeek = d.getDay();
var header = document.getElementById("header");
 
 switch(dWeek) {
  case 6: 
  header.style.backgroundImage = 'url(images/weekend.jpg)';//суббота
  break;
  
  case 0: // в Javascript воскресенье - это день недели под номером 0 
  header.style.backgroundImage = 'url(images/weekend.jpg)';
  break;
  
  default:
  header.style.backgroundImage = 'url(images/header.jpg)'; // в течении недели
 }

}
cHeader();

Вопросы, замечания и пожелания по настройке скриптов пишем в комментариях.


взято отсюда