Автоматическая смена шапки сайта (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();

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




Комментировать

captcha

Сайты:



Новые отзывы о сайтах:

Авторизация

Если у Вас нет учетной записи, зарегистрируйтесь

captcha

Напомнить пароль
Создание учётной записи

captcha

  Подтверждаю, что согласен с условиями политики конфиденциальности.

Напомнить пароль

captcha

Войти в личный кабинет