Автор

Смена стиля по времени суток и по дате

Смена стиля по времени суток и по дате


Буквально перед новым годом задался целью автоматизировать свой сайт, а именно сделать так чтобы с 15 декабря до 15 января работал один стиль CSS, а в остальное время другой!

Чётко того что именно мне надо было не нашел, но нашел вот такой вариант смены стиля по времени суток!

Итак, что нам потребуется. Во-первых, возьмите из папки вашей темы файл style.css и создайте с него 4 копии с такими названиями: styles_zakat.css, styles_rassvet.css, styles_den.css, styles_noch.css.
Вы можете сразу же внести изменения по вкусу в каждый стиль, если вдруг непонятен будет транслит:
styles_zakat.css - закат,
styles_rassvet.css - рассвет,
styles_den.css - день,
styles_noch.css - ночь.

Залейте все эти файлы в папку css вашего шаблона. 

Дублировать весь файл не обязательно! Можно оставить свой "дефолтный" который будет прописан самый первый, а потом скриптом подгружать именно нужные изменения!)

 

JavaScript

Подключаем скрипт

<script type="text/javascript">// <![CDATA[
function change(css)
{document.write('<link href=\"\/templates\/_ваш стиль_\/css\/styles'+css+'.css\" rel=\"stylesheet\">');}
var h=(new Date()).getHours();
if (h > 23 || h <7) change('_noch');//ночь
if (h > 6 && h < 12) change('_rassvet');//утро
if (h > 11 && h < 19) change('_den');//день
if (h > 18 && h < 24) change('_zakat');//вечер
// ]]></script>

Вот собственно и всё! Скрипт работает как надо! Но моей задачей было смена основного дизайна на новогодний. В принципе больших изменений в скрипте делать не надо. Вот мой пример:

<script type="text/javascript">
function change(css)
{document.write('<link href=\"\/templates\/_ваш стиль_\/css\/styles'+css+'.css\" rel=\"stylesheet\">');}
var now = new Date(),
month = now.getMonth(),
day = now.getDate();
if( (month == 11 && day >=15) || (month == 0 && day <= 15) ) change('_novogodniy');
if( (month == 0 && day >=16) || (month == 11 && day <= 14) ) change('_osnovnoy');
</script>

Вот и всё!

Многие материалы на сайте взяты из блогов: "Все для веб-дизайнера Rudebox", "A free library of HTML, CSS, JS nuggets Codyhouse" - полностью переведен и представлен в ознакомительных целях!

vk.com/club.ssdru

Подписывайтесь на нашу группу в контакте vk.com/club.ssdru



Статьи по темеJS

Смена стиля по времени суток и по дате

В последнее время мы экспериментировали с анимацией SVG. Сегодняшний урок показывает вам, как анимировать сразу несколько путей SVG, чтобы создать стильный фоновый эффект для модального окна.


Смена стиля по времени суток и по дате

Представляю вашему вниманию 4 интересных шаблона для сайта (скоро открытие сайта).


Смена стиля по времени суток и по дате

Полноразмерный, адаптивный и простой в настройке слайдер.


Смена стиля по времени суток и по дате

Красивый дизайн всегда положительно сказывается на его репутации. Ведь не секрет, если дизайн плох, то и находиться на таком ресурсе не вызывает интереса. Недавно в одном из премиум шаблонов заметил интересное меню, которое отлично вписывается в темный дизайн сайта. Эта навигация весьма привлекательная, и меня она заинтересовала. Одним из преимуществ такого меню является то, что оно написано полностью на css. Идея меню состоит в том, что ползунок, который находиться над верхней частью меню, плавно скользит к активным пунктам навигации.


Раскрутка в соцсетях

В данном блоге описано где и как сделать накрутку групп, сообществ и личных страничек в популярных социальных сетях и тест платных сайтов занимающихся накруткой.


Перейти в Блог

Надёжный хостинг

С нами хостинг удобен и прост, как диван у вас дома. Вы с комфортом размещаетесь, а все внутренние пружины мы берем на себя.

Бесплатный тестовый период, ежедневные бэкапы, неограниченный трафик, акции с бонусами... Конечно, у нас все это есть.


Перейти на хостинг

О КОМПАНИИ

Studio Design существует с 2001 года. Основной нашей деятельностью до 2007 года было видеопроизводство ( видеореклама и документальные фильмы, о чем подробно описано в нашем блоге ). С 2007 года, вот уже как лет, наша основная специфика - это создание сайтов для бизнеса или частной деятельности, веб дизайн, а также поддержка и администрирование готовых проектов. Каждая выполненная нами работа - это уникальный, а самое главное, адаптивный под все современные мобильные устройства дизайн сайта. Мы готовы создать сайт с нуля для каждого клиента с любого уголка России! Мы поможем Вам в создании, как одностраничных сайтов – визиток, так и крупных интернет магазинов или корпоративных сайтов. А все наши работы, большинство из которых действуют и по сей день!

Close

Целовальников Сергей


Веб-дизайн, HTML5, CSS3, jQuery, JavaScript, Верстка.

Верстальщик с большим опытом работы. Занимаюсь созданием сайтов с 2005 года. Постоянно обучаюсь и совершенствую свои навыки. Веду свои проекты, в том числе и данный блог.

Close