Зміна дизайну в залежності від часу доби

Відео: Різниця в характерах в залежності від часу доби при народженні

Відео: [CLEO] Зміна часу доби і погоди в Сампо 0.3.7

Багатьом з Вас зустрічалися сайти, де вдень і вночі різний дизайн. Наприклад, днем ​​він світлий, а вночі, щоб не зліпити занадто сильно, він, навпаки, робиться більш темним. У цій статті я розповім, як робиться така зміна дизайну в залежності від часу доби.

Насамперед, Вам необхідно зробити 2 CSS-файлу: Денний варіант і нічний. Нехай це будуть файли day.css і night.css відповідно.

Обчислення часу доби і підключення відповідного файлу стилів можна робити як на jаvascript, так і на PHP. Але в другому випадку нам буде складно з`ясувати часовий пояс відвідувача, а, як наслідок, його час. У нас на сервері може бути день, а у відвідувача глибока ніч, а йому буде виводитися денний дизайн, що дуже дивно. Тоді як в jаvascript в цьому плані проблем немає. Тому ми з Вами реалізуємо скрипт зміни дизайну через jаvascript, щоб це працювало максимально коректно.

Отже, повний код всього цього наведено нижче:

Код дуже простий. За замовчуванням підключається денний файл стилів. І він, до речі, залишиться у тих, у кого відключений jаvascript. Для тих, у кого він включений, і при цьому зараз ніч, він зміниться на нічний файл стилів. Як бачите, скрипт дуже простий.

Якщо хочете потренуватися, то можете поліпшити скрипт зміни дизайну сайту в залежності від часу доби, додавши облік поточного дня і місяця. Очевидно, що 20-го грудня о 18:00 вже фактично ніч на вулиці, тоді як 20-го червня і о 21:00 ще світло. Тому в якості тренування можете придумати алгоритм, який буде це враховувати.