Affichage d'une CSS différente selon l'heure
Bonjour,
Je travaille sur un site pour lequel j'aimerais afficher des CSS différentes en fonction de l'heure qu'il est.
Par exemple, de 20h à 8h = style1.css
De 8h à minuit = style2.css
Est-ce que quelqu'un parmi vous aurait la gentillesse de m'expliquer comment faire ça en PHP (avec code à l'appui, car je ne suis pas programmeuse)? J'imagine que cela ne doit pas être très compliqué, il faut juste savoir comment le faire :-P
D'avance un grand merci! ;)*
Je travaille sur un site pour lequel j'aimerais afficher des CSS différentes en fonction de l'heure qu'il est.
Par exemple, de 20h à 8h = style1.css
De 8h à minuit = style2.css
Est-ce que quelqu'un parmi vous aurait la gentillesse de m'expliquer comment faire ça en PHP (avec code à l'appui, car je ne suis pas programmeuse)? J'imagine que cela ne doit pas être très compliqué, il faut juste savoir comment le faire :-P
D'avance un grand merci! ;)*
Configuration: Windows XP Firefox 2.0.0.4
7 réponses
-
bonjour
je voudrai juste remercier gryzzly qui a resolue mon probleme, grace a son script ;)
je remet le script:
a mettre dans le header de votre page!!!
<!-- Affichage de la feuille javascript-->
<script src="./CSS/CSS.js" type="text/javascript"></script>
<!-- Afiichage du CSS simple pour ceux qui n'ont pas java-->
<noscript><link rel="stylesheet" href= <!-- votre nom de feuille CSS exp:--> "CSS/essai.css" type="text/css"></noscript>
ensuite creer une feuille javascript appelée CSS.js (pour la creation de la feuille suffit de mettre le ".js", les navigateurs comprendrons)
et mettez ceci dedans
// JavaScript Document
HeureLocale = new Date();
if (HeureLocale.getHours() < 6)
{
document.write ("<link rel=\"stylesheet\" type=\"text/css\" media=\"screen\" href=\"CSS/essai.css\" />")
}
else {
if (HeureLocale.getHours() >= 6 && HeureLocale.getHours() < 10)
{
document.write ("<link rel=\"stylesheet\" type=\"text/css\" media=\"screen\" href=\"CSS/essai.css\" />")
}
else {
if (HeureLocale.getHours() >= 10 && HeureLocale.getHours() < 18)
{
document.write ("<link rel=\"stylesheet\" type=\"text/css\" media=\"screen\" href=\"css/essai2.css\" />")
}
else {
if (HeureLocale.getHours() >= 18 && HeureLocale.getHours() < 22)
{
document.write ("<link rel=\"stylesheet\" type=\"text/css\" media=\"screen\" href=\"css/essai.css\" />")
}
else {
if (HeureLocale.getHours() >= 22)
{
document.write ("<link rel=\"stylesheet\" type=\"text/css\" media=\"screen\" href=\"css/essai.css\" />")
}
}}}}
de la vrais cuisine ^^
avec sa, sa marchera impec
merci encore a gryzzly-
-
@nesBonjour,
L'affichage d'une CSS différente selon la date : Il faut tout simplement remplacer getHours () par getDate().
J'avais fait juste une petit erreur dans mon code.
A bientôt
-
-
Salut,
j'ai une petite idée du code à utiliser, le voilà avec des commentaires :
<?php $change = date ('G'); //Retourne l'heure au format 24 heures, de 0 à 23. //Dans la partie de ton code qui appelle la feuille de style tu entres ça if (0 <= $change <= 8) // Si l'heure est comprise entre 0 et 8 inclus { echo'<LINK rel=stylesheet type="text/css" href="style1.css">'; //Appeler la feuille de style 1 } else } echo'<LINK rel=stylesheet type="text/css" href="style2.css">'; //Sinon appeler la feuille de style 2 } ?>
Pour le principe je suis sûr de mon coup, pour l'appel des feuilles de style un peu moins. Si jamais ça ne fonctionne pas, tiens moi au courant. -
Merci beaucoup, je vais essayer et je te dirai ce qu'il en est. :)
-
ContributeurSalut,
sinon tu a la possibilité javascript :
dans le head :<!-- Commentaire: Le JS ci dessous appelle la feuille de style variable selon l'heure --> <script src="./css/css.js" type="text/javascript"></script>
et le fichier css.js (ici, y'a 4 feuilles de styles)
HeureLocale = new Date(); if (HeureLocale.getHours() < 6) { document.write ("<link rel=\"stylesheet\" type=\"text/css\" media=\"screen\" href=\"css/style4.css\" />") } else { if (HeureLocale.getHours() >= 6 && HeureLocale.getHours() < 10) { document.write ("<link rel=\"stylesheet\" type=\"text/css\" media=\"screen\" href=\"css/style1.css\" />") } else { if (HeureLocale.getHours() >= 10 && HeureLocale.getHours() < 18) { document.write ("<link rel=\"stylesheet\" type=\"text/css\" media=\"screen\" href=\"css/style2.css\" />") } else { if (HeureLocale.getHours() >= 18 && HeureLocale.getHours() < 22) { document.write ("<link rel=\"stylesheet\" type=\"text/css\" media=\"screen\" href=\"css/style3.css\" />") } else { if (HeureLocale.getHours() >= 22) { document.write ("<link rel=\"stylesheet\" type=\"text/css\" media=\"screen\" href=\"css/style4.css\" />") } }}}} -
Merci de votre aide !
Peut-on faire la même chose pour afficiher une image selon l'heure de la journée, je voudrai que selon l'heure une image change.
Pas très doué en javascript , votre aide me serais précieuse -
En php ça pourrait donner ça :
<?php
$hour = date ('G');
if (0 <= $hour <= 8) {
$srcImg = "image1.gif"//l'adresse de ton image 1
} else {
$srcImg = "image2.gif" //l'adresse de ton image 2
}
?>
et dans ton html tu écris :
<img src='<?php echo $srcImg; ?>' />
en javascript :
var imgElement = document.getElementById('image') // remplace image par l'id que tu as donné à la balise img dans ton html
var localDate= new Date();
if (v.getHours() <= 8) {
img.src='image1'; //adresse de ton image 1
} else {
img.src='image2'; //adresse de ton image 2
} -
merci beaucoup je vais essayé bon we
