WebWost WebWostbeta

Ночной дизайн сайта

Изменение стилей сайта в зависимости от времени. Варианты на PHP и JS.

Al-Sher

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

Существует несколько вариантов реализации данной затеи, например на 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 rel="stylesheet" href="<?=((date('H')>14 or date('H')<6) ? 'night.css' : 'morning.css')?>">

Тут я использовал сокращенную запись условия, в котором проверяется время и, в зависимости от него, вставляется определенная строка.

Давайте теперь рассмотрим плюсы данных методов. Рассматривать мы будем в том же порядке.

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

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

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

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

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

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

0 Комментариев

Новый комментарий