Автор

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

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


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

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

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


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

Смелая навигация, слайд-шоу, когда активна, заменяет текущий контент в трехмерном пространстве.


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

На сайтах вы наверняка встречали слайдеры, которые создают эффект объемности, при этом они собраны по концепции с минимальным дизайном, а именно отсутствием фона и окантовок, это означает, что визуально изображения ни к чему не привязано. В данном уроке мы рассмотрим как создать замечательный слайдер с эффектом парящих изображений и небольшой анимацией, все это будет реализовано с помощью jquery и правил css3. Кроме этого мы добавим подписи, которые будут плавно появляться и исчезать.


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

Простая 3D-анимация для ваших элементов галереи, чтобы пользователи могли легко узнать больше о ваших продуктах, не покидая страницу.


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

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


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

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

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

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


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

О КОМПАНИИ

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

Close

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


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

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

Close