Думаю практически все, кто пользуется Gmail, успели ознакомиться с автоматическим изменением темы интерфейса, в зависимости от времени суток. Представляю вашему вниманию скрипт автора McBonio, который реализует данную опцию.
Он позволяет подгружать соответствующий CSS-файл в зависимости от времени суток. Для этих целей используются 4 CSS-файла и их смена происходит в 6 утра, 12 часов дня, а также 7 и 11 часов вечера. Демо-версию работы скрипта можно посмотреть по ссылке в конце статьи, там же доступен полный комплект файлов.
Но давайте подумаем, как еще может использоваться этот скрипт, кроме достаточно банального изменения цветовой схемы сайта?
Например, одним из интересующих любого покупателя моментов, является график работы вашего магазина и его службы доставки. Давайте рассмотрим — каким образом мы можем использовать этот скрипт для того, чтобы в легкой и дружественной визуальной форме продемонстрировать посетителю эту информацию.
Предположим, график выглядит так:
- Работа офиса: 9:00 — 19:00
- Доставка: 9:00 — 21:00
- Прием заказов через сайт: круглосуточно
Для этого нам необходимо нарисовать 3 изображения:
- Мы уже на работе! Менеджеры — на месте, а курьеры — в пути! // выводится с 9:00 до 19:00
- Менеджеры уже отдыхают, но курьеры — работают! // Выводится с 19:00 до 21:00
- Офис — пуст. Телефон — стал факсом. Курьеры — спят. Но мы с радостью примем Ваш заказ через сайт! // выводится с 21:00 до 9:00
Данные фразы — просто примеры, а в реальной ситуации их количество можно увеличивать до бесконечности. Главное — не запутаться во времени.
После этого все, что нам нужно — изменить в теле скрипта диапазон вывода и нарисовать 3 картинки. И, вуаля — посетителю больше не нужно заходить в раздел «Контакты» и смотреть на часы, для того, чтобы определить — есть смысл вам звонить или оптимальнее отправить заказ через сайт.
Где и как выводить эти изображения — зависит от дизайна вашего магазина. Например, можно отобразить график в виде таблички рядом с логотипом, или оформить как всплывающий блок в правом-верхнем/нижнем углу сайта. Все зависит исключительно от вашей фантазии.
Поскольку пример содержит большее количество вариаций вывода временных промежутков, чем рассматривалось в нашей ситуации — я привожу код так, как он написан McBonio. А изображения вы уже нарисуете сами.
PHP код
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <link rel="stylesheet" href="<?php date_default_timezone_set("GMT"); // настройте ваш часовой пояс $thetime = date("H"); // H означает, что расчет идет в 24-часовом формате // эта часть позволяет выбирать соответствующий времени css-файл if($thetime > 00 AND $thetime < 06) { echo "nighttime.css";} // между полночью и 6 утра elseif($thetime > 05 AND $thetime < 12) { echo "morning.css";} // между 6 утра и 12 дня elseif($thetime > 11 AND $thetime < 19) { echo "midday.css";} // между 12 дня and 7 вечера elseif($thetime > 18 AND $thetime < 23) { echo "gettingdark.css";} // между 7 вечера and 11 вечера elseif($thetime = 23) { echo "nighttime.css";} // 11 вечера elseif($thetime = 00) { echo "nighttime.css";} // полночь ?>" type="text/css" media="screen" /> |
Настраиваем часовой пояс
В этой части мы настраиваем часовой пояс, в зависимости от вашего местоположения (в примере настроен GMT). Эта часть важна, поскольку если вы ее не настроите, то будет использован часовой пояс сервера, который может располагаться в другой стране и потому смена цветовой схемы будет некорректна.
1 | date_default_timezone_set("GMT"); // настройте ваш часовой поясe |
Вы можете посмотреть настройки для вашего часового пояса здесь и здесь.
Время
Эта часть проста и ее не нужно менять — она означает, что время будет выводиться в 24-часовом формате. Например, 23:00.
1 | $thetime = date("H"); // H означает, что расчет идет в 24-часовом формате |
Основная часть кода
Эта секция выполняет основную функцию, подгружая соответствующий по времени CSS-файл. Править ее нет необходимости, но вы можете поменять названия CSS-файлов.
1 2 3 4 5 6 | if($thetime > 00 AND $thetime < 06) { echo "nighttime.css";} // между полночью и 6 утра elseif($thetime > 05 AND $thetime < 12) { echo "morning.css";} // между 6 утра и 12 дня elseif($thetime > 11 AND $thetime < 19) { echo "midday.css";} // между 12 дня and 7 вечера elseif($thetime > 18 AND $thetime < 23) { echo "gettingdark.css";} // между 7 вечера and 11 вечера elseif($thetime = 23) { echo "nighttime.css";} // 11 вечера elseif($thetime = 00) { echo "nighttime.css";} // полночь |
Полный пакет файлов содержит CSS-файлы, изображения и PHP код — скачать архив.
А какие варианты использования такого скрипта видите вы?
Интересные статьи
Сегодня хочу порекомендовать вам к прочтению очень полезную статью в блоге Яна Такушевича — Удобный способ объединения CSS и JavaScript файлов в wordpress. Использование предложенного метода позволит вам оптимизировать скорость загрузки WordPress-блога.
А механика, предложенная Яном в статье «Как реализовать постраничную навигацию в wordpress без плагинов» — уже используется на этом блоге.
Советую подписаться на RSS-ленту блога Яна Такушевича — «Блогинг в стиле web 2.0», для получения свежих новостей и материалов.