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

Опубликовано: 05.09.2018

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

07 - Как изменить внешний вид шапки сайта

Представленные в этой статье скрипты автоматически изменяют шапку сайта, в зависимости от периода времени. Для работы скриптов обязательным является наличие 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 числа каждого месяца.


смена шапки на сайте ucoz..avi

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. Адаптивный слайдер для сайта - Slick.js

Если планируется смена шапки сайта в определенные числа месяца (но не последовательные, или последовательные с перерывом), например, менять шапку сайта 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();

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

Freeden

4464

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

rss