Trecerea de stiluri css și schimbarea designului site-ului, în funcție de momentul zilei sau de timp a anului

Bună ziua dragi cititori! Recent, a devenit popular pentru a schimba designul site-ului, în funcție de momentul zilei sau de timp a anului. De exemplu, în ziua în care site-ul este afișat în tonuri mai deschise, iar noaptea, dimpotrivă, devine mai întunecat. Sau, de exemplu, un număr de site-uri în timpul iernii, aproape de noul an în antet există diferite decoratiuni in forma de bile de Crăciun și pomi de Crăciun. foi de stil CSS permit designerilor web un efort minim pentru a schimba aspectul site-ului. În continuare, să vedem cum se face o astfel de schimbare de proiectare, în funcție de ora din zi sau an.

Pentru a schimba designul site-ului este suficient pentru a înlocui un fișier CSS stylesheet, în funcție de ora sau data.

Pentru a pune în aplicare modificarea mecanismului de proiectare este necesară pentru a pregăti mai multe opțiuni pentru CSS-fișiere. De exemplu, pentru a schimba ziua și design de noapte va pregăti două fișiere: day.css și night.css.

După cum se poate vedea simplu cod. Implicit conecta zilnic stiluri de fișier day.css. Apoi, folosind un obiect Data defini ora curentă și client dacă acesta cade în noaptea zilei de schimbare a intervalului night.css noapte stylesheet.

Dacă noaptea, ceva de genul:

exemple de cod sursă poate fi descărcat de aici.

Designul site-ului în funcție de perioada anului

Din nou ne pregatim mai multe CSS-fișiere, de exemplu spring.css, summer.css, autumn.css și winter.css.

Pentru a determina timpul anului, știm luna curentă este de ajuns. Pentru a lucra cu data în PHP este o funcție de data (). Pentru a determina timpul anului vom scrie funcția:

funcționa getSeason ()
$ Luna = data ( „n“); // definirea unui număr de luna curentă
comutator ($ luna)
Cazul 1:
Cazul 2:
caz 12: întoarcere „de iarnă“;
Cazul 3:
Cazul 4:
Cazul 5: întoarcere „de primăvară“;
Cazul 6:
Cazul 7:
Cazul 8: întoarcerea „vară“;
Cazul 9:
Cazul 10:
caz 11: întoarcere „toamnă“;
implicit: întoarcerea „vară“;
>
>

Și vom adăuga funcția noastră într-un cod html: