Автоматическая смена шапки сайта (JavaScript)
Опубликовано: 05.09.2018
Представленные в этой статье скрипты автоматически изменяют шапку сайта, в зависимости от периода времени. Для работы скриптов обязательным является наличие 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