Le style de votre page qui s’adapte en fonction du moment de la journée (Matin, Après-midi, Soir)

ça fait rêvé hein ?

Voici comment faire ça simplement et en Javascript, comme ça tout le monde est content, pas de PHP, de Java ou de Ruby…juste un script côté client :

 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 
<script type="text/JavaScript"> <!-- function getStylesheet() {       var currentTime = new Date().getHours();       if ( <= currentTime&&currentTime < 5) {        document.write("<link rel='stylesheet' href='night.css' type='text/css'>");       }       if (5 <= currentTime&&currentTime < 11) {        document.write("<link rel='stylesheet' href='morning.css' type='text/css'>");       }       if (11 <= currentTime&&currentTime < 16) {        document.write("<link rel='stylesheet' href='day.css' type='text/css'>");       }       if (16 <= currentTime&&currentTime < 22) {        document.write("<link rel='stylesheet' href='evening.css' type='text/css'>");       }       if (22 <= currentTime&&currentTime <= 24) {        document.write("<link rel='stylesheet' href='night.css' type='text/css'>");       } }   getStylesheet(); --> </script>   <noscript><link href="main.css" rel="stylesheet" type="text/css"></noscript>

 

Explications:

 – La variable currentTime, comme son nom l’indique, récupère l’heure (H) courant. Par la suite des tests sont fait pour savoir quelle heure il fait ou du moins dans quel intervalle d’heures on est. Une feuille de style est chargée en fonction de ça.

 – La fonction Javascript write permet simplement de renvoyer la contenu quelle possède en paramètre…Une peu comme la fonction echo en PHP ou encore la méthode println en Java. Dans notre cas, la fonction renvoi simplement la feuille de style. Veillez donc à créer les différents fichiers CSS

night.css, morning.css, day.css,  evening.css et .

 

Source : css-tricks.com