Affichage d'une CSS différente selon l'heure

kreestal Messages postés 2 Statut Membre -  
 nes -
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! ;)*
A voir également:

7 réponses

Réponse 1 / 7
stephinvité
 
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
2
nes
 
Bonsoir,

Pouvons nous choisir l'affichage d'une CSS différente selon la date.

Je pensais que remplacer getHours () par getDate() fonctionnerai mais hélas je n'arrive pas.

Par avance merci,

Séb
0
nes > nes
 
Bonjour,

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
0
Réponse 2 / 7
Linux67 Messages postés 307 Statut Membre 123
 
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.
0
Réponse 3 / 7
kreestal Messages postés 2 Statut Membre
 
Merci beaucoup, je vais essayer et je te dirai ce qu'il en est. :)
0
Réponse 4 / 7
gryzzly Messages postés 5220 Statut Contributeur 1 335
 
Salut,

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\" />")
	}
	}}}}
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 7
dom
 
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
0
Réponse 6 / 7
snoopy5.0 Messages postés 11 Statut Membre
 
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
}
0
Réponse 7 / 7
dom
 
merci beaucoup je vais essayé bon we
0

Discussions similaires

Bug d'affichage sur ma Freebox Revolution
BourrinOman83 -
brupala -

4 réponses
Ma free n'affiche plus l'heure !
aliboss95 -
pellizzari -

5 réponses
Colissimo
Pauline5010 -
Pauline5010 -

8 réponses
Colis à l'aéroport.
Fatou -
Fatou -

5 réponses
Je tiens combien de temps avec 2Go d'internet ?
champi100 -
dadout -

7 réponses