High-Tech Santé Médecine Droit-Finances

Auto-Entrepreneur

Comment faire ?

Rechercher : dans
Par :

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

Dernière réponse le 6 sep 2009 à 12:20:17 kreestal, le 10 jui 2007 à 09:28:29 
 Signaler ce message aux modérateurs

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! ;)*

Configuration: Windows XP
Firefox 2.0.0.4

Meilleures réponses pour « Affichage d'une CSS différente selon l'heure » dans :
Popup en CSS, sans Javascript VoirVoici comment réaliser une popup d'information en pure CSS, sans Javascript. L'astuce est d'utiliser :hover de manière à utiliser des CSS différents au passage du curseur. Parmis les attributs CSS modifiés, on utilise display:none afin de...
Utiliser l'Administrateur caché de Vista VoirVista, comme XP, possède un compte nommé "Administrateur" mais il est caché et non activé par défaut. Pour que ce compte apparaisse dans la liste des utilisateurs à l'écran d'accueil, la méthode est différente selon que l'on utilise une version...
Ajouter son site dans les moteurs de recherche VoirComment ajouter son site dans les moteurs de recherche C'est une question que tous se posent ... Le principe est le même mais le fonctionnement est parfois différent selon les moteurs ! En voici donc quelques-uns, mais dans une liste non...
Télécharger Clockmate Voir
Télécharger FileTypesMan VoirFilesTypesMan est une alternative à l'onglet "Types de Fichiers" dans "Option de Dossier" de Windows. Il affiche la liste des extensions et des types de fichiers sur votre ordinateur. Pour chaque extension, il affiche ces différentes informations : ...
Cloaking (dissimulation) VoirQu'est-ce que le cloaking ? Le cloaking (en français dissimulation) est une technique proscrite par les moteurs de recherche (donc à éviter), consistant à générer un contenu HTML différent selon qu'il s'agit d'un visiteur ou d'un moteur de...
Posez votre question Répondre

1

Linux67, le 10 jui 2007 à 09:41:05

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.

   
Répondre à Linux67

2

kreestal, le 10 jui 2007 à 10:27:26

Merci beaucoup, je vais essayer et je te dirai ce qu'il en est. :)

   
Répondre à kreestal

3

gryzzly, le 10 jui 2007 à 19:46:58

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\" />")
	}
	}}}}
Deux choses sont infinies : l'Univers et la bêtise humaine.
Mais en ce qui concerne l'Univers, je n'en ai pas encore acquis la certitude absolue. A. Einstein

   
Répondre à gryzzly

4

dom, le 14 sep 2007 à 11:38:51

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

   
Répondre à dom

5

snoopy5.0, le 14 sep 2007 à 11:48:29

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
}

   
Répondre à snoopy5.0

6

dom, le 14 sep 2007 à 15:57:18

Merci beaucoup je vais essayé bon we

   
Répondre à dom

7

stephinvité, le 6 déc 2007 à 15:21:53
  • +1

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

   
Répondre à stephinvité

8

nes, le 6 sep 2009 à 01:17:22

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

   
Répondre à nes

9

 nes, le 6 sep 2009 à 12:20:17

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

   
Répondre à nes
Posez votre question Répondre
Ils ont besoin de votre aide