Преминаване стилове CSS и промяна на дизайна на сайта в зависимост от времето на деня и време на годината

Здравейте скъпи читатели! Наскоро стана популярна за промяна на дизайна на сайта, в зависимост от времето на деня и време на годината. Така например, в деня на сайта се показва в по-светли тонове, а през нощта, а напротив, става по-тъмно. Или, например, редица обекти през зимата, в близост до новата година в заглавната има различни декорации под формата на коледни топки и коледни елхи. CSS стилове позволяват уеб дизайнери минимални усилия, за да промените външния вид на сайта. На следващо място, нека да видим как да се направи такава промяна на дизайна, в зависимост от времето на деня или година.

За да промените дизайна на сайта е достатъчно, за да бъде заменен с CSS стилове на файла, в зависимост от времето или датата.

За да осъществи промяната на механизъм дизайн е необходимо да се подготвят няколко варианта за CSS файлове. Например, за да се промени деня и нощта дизайн ще подготви два файла: day.css и night.css.

Както се вижда прост код. По подразбиране се свърже дневни стилове файл day.css. На следващо място, като се използва Дата обект определи текущата час и клиентът, ако той попада в нощен интервал промяна деня в нощ стилове night.css на.

Преминаване стилове CSS и промяна на дизайна на сайта в зависимост от времето на деня и време на годината

Ако през нощта, нещо като това:

Преминаване стилове CSS и промяна на дизайна на сайта в зависимост от времето на деня и време на годината

Източник код примери могат да бъдат изтеглени тук.

дизайн на сайта, в зависимост от времето на годината

Отново подготвяме няколко CSS файлове, например spring.css, summer.css, autumn.css и winter.css.

За да се определи времето на годината, ние знаем текущия месец е достатъчно. За да работите с датата на PHP е функция на дата (). За да се определи времето на годината пишем на функцията:

функционира getSeason ()
$ Месец = дата ( "N"); // определи броя на текущия месец
превключвател ($ на месец)
СЛУЧАЙ 1:
При 2:
При 12: връщане "зима";
Случай 3:
При 4:
При 5: връщане "пролет";
При 6:
При 7:
При 8: завръщане "лято";
При 9:
При 10:
При 11: връщане "есен";
по подразбиране: завръщане "лято";
>
>

И ние добавяме нашата функция в HTML-код: