Всем привет. Сегодня я решил поделиться способом изменения стилей сайта в зависимости от времени. Как мне кажется, данная идея будет очень интересна пользователям вашего сайта.

Существует несколько вариантов реализации данной затеи, например на PHP или JS, но в любом случае нам придется либо заменять ссылку на файл со стилями, либо менять классы.

Давайте сначала рассмотрим вариант со сменой классов на JavaScript. Суть данного способа заключается в смене классов у элементов, например morning на night и наоборот. Вот вам сразу и код, позволяющий реализовать подобное:

$(document).ready(function() {
    time=new Date();
    time=time.getHours();
    if(time>14 || time < 6) {
        $('.morning').addClass('night');
        $('.morning').renoveClass('morning');
    } else {
        $('.night').addClass('morning');
        $('.night').removeClass('night');
    }
});

Скрипт использует jQuery!

Итак, рассматриваем скрипт подробнее: изначально мы получаем дату и записываем её в time, затем проверяем время и с 14 до 6 ставим "ночные" классы, удаляя "утренние", иначе ставим "утренние" классы, удаляя ночные. Надеюсь я понятно описал схему действий) Следующий вариант - замена CSS файла. Идея заключается в создании двух файлов стилей, один из которых содержит ночной дизайн, а другой дневной. Назовем наши файлы morning.css и night.css соответственно, а так же, при подключении, добавим им какой-нибудь уникальный id, например editDay. Давайте снова разберем пример на JavaScript`е.

$(document).ready(function() {
    time=new Date();
    time=time.getHours();
    if(time>14 || time<6) { 
        ('#editDay').attr('href','night.css');
    } else {
        $('#editDay').attr('href','morning.css');
    }
});

Скрипт использует jQuery!

Скрипт так же получает время, но теперь, вместо замены классов, заменяются файлы стилей. Замена происходит при помощи функции attr, заменяющей содержимое href. Ну и напоследок замена при помощи PHP.

<link href="<?=((date('H')>14 or date('H')<6) ? 'night.css' : 'morning.css')?>" rel="stylesheet"></link>

Тут я использовал сокращенную запись условия, в котором проверяется время и, в зависимости от него, вставляется определенная строка. Давайте теперь рассмотрим плюсы данных методов. Рассматривать мы будем в том же порядке. Замена классов посредствами JavaScript:

• Время берется с устройства пользователя, а не сервера;
• Возможность динамической смены дизайна;
• Поддерживается большинством устройств.

Замена файла стилей посредствами JavaScript:

• Время берется с устройства пользователя, а не сервера;
• Возможность динамической смены дизайна;
• Поддерживается большинством устройств;
• Меньшая нагрузка на устройство пользователя.

Замена файлов стилей посредствами PHP:

• Поддержка всеми устройствами;
• Замена происходит на сервере, что убирает даже минимальную нагрузку на устройство пользователя;
• Отсутствует зависимость от включенного JavaScript`a.

Для себя я бы выбрал способ на PHP, так как мне так привычнее, да и поддерживается всеми устройствами, но данный способ имеет и минусы: Отсутствие динамической смены дизайна; берется серверное время, то есть не у всех пользователей скрипт различит день и ночь.

Максимально хорошим вариантом, как мне кажется, станет использование PHP и Ajax. Данный способ позволит динамически изменить дизайн сайта, а так же сделает смену дизайна максимально правильным(время будет браться с браузера пользователя). При отсутствии возможности использовать Ajax, PHP сам изменит дизайн, что так же будет плюсом. А теперь теории по реализации такого: На JavaScript`e проверяем время пользователя благодаря таймеру каждую минуту, если время изменилось(наступил день/ночь), то на сервер отправляется запрос и просит новую ссылку, которую и установит в качестве стилей сайта.

Надеюсь вам пригодится данная статья и вы сможете использовать данную идею у себя на сайте :) Если у вас имеются идеи по реализации подобного эффекта, то пишите их в комментариях, возможно тогда статья станет по-настоящему наполненной :)