Changer le background suivant jour et nuit

**cincap** · 05/02/2010, 17h46

Bonjour à toutes et à tous,

J'aimerai pouvoir changer le background de ma page suivant l'heure du jour et la nuit.

Je suis plutôt orienté Delphi donc un peu d'indulgence.

Voici le code qui m'affiche mon background :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
 
<BODY bgcolor="#000000" background= "Data/Fond.jpg" bgproperties="fixed" topmargin="5">
</BODY>

Peut être avec un javascript :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 
 
<script LANGUAGE="JavaScript" >
 
function affiche_image(){
ma_date=new Date();
heure=ma_date.getHours();
minute=ma_date.getMinutes();
seconde=ma_date.getSeconds();
if ((heure>=0) && (heure<8) && (minute<60) && (seconde<60)) {
image='<img src="nuit.jpg">';
}
if ((heure>19) && (heure<24) && (minute<60) && (seconde<60)) {
image='<img src="nuit.jpg">';
}
 
document.write(image);
}
</script

Mais sans succès.

Merci de l'aide éventuelle.

@+,

Cincap

**SpaceFrog** · 05/02/2010, 18h09

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

document.body.style.backgroundImage="url(nuit.jpg)";

**cincap** · 05/02/2010, 18h40

@ SpaceFrog, merci de ta réponse mais soit je m'y prends mal soit le chemin des images n'est pas reconnu.

Voici mon test :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 
<script LANGUAGE="JavaScript" >
 
function affiche_image(){
ma_date=new Date();
heure=ma_date.getHours();
minute=ma_date.getMinutes();
seconde=ma_date.getSeconds();
if ((heure>=0) && (heure<8) && (minute<60) && (seconde<60)) {
image='<img src="Data/Fond.jpg">';
}
if ((heure>19) && (heure<24) && (minute<60) && (seconde<60)) {
image='<img src="Data/Fondnuit.jpg">';
}
document.body.style.backgroundImage="url(Data/Fond.jpg)";
}
</script>
</HEAD>
<BODY  onload="affiche_image()" bgcolor="#000000" bgproperties="fixed" topmargin="5">
</BODY>

@+,

Cincap

**Bovino** · 05/02/2010, 19h31

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
var heure=new Date().getHours();
switch(heure<8 && heure>19){
case true:
document.body.style.backgroundImage="url(nuit.jpg)";
break;
case false:
document.body.style.backgroundImage="url(jour.jpg)";
break;
}

Pour info, les heures sont comprises entre 0 et 23 et les minutes et secondes entre 0 et 59, donc la majorité de tes tests sont équivalents à 1==1

**SpaceFrog** · 05/02/2010, 20h54

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
var heure=new Date().getHours();
document.body.style.backgroundImage=(heure<8 && heure>19)?"url(nuit.jpg)":"url(jour.jpg)";

**nours312** · 05/02/2010, 23h30

Si vous me permettez une intrusion : POURQUOI en JavaScript ??

un autre langage serai-il pas Bien plus adapté à ce genre de onction ? php par exemple ...
ça éviterais d'ajouter des script Totalement inutile au navigateur ... Javascript est plus en adéquation avec la gestion dynamique de l'interface que l'implémentation d'un élément "static" ...

Enfin, c'est mon avis, mais je peux aussi me tromper ^^

**Bovino** · 06/02/2010, 10h49

Envoyé par nours312

Si vous me permettez une intrusion : POURQUOI en JavaScript ??

un autre langage serai-il pas Bien plus adapté à ce genre de onction ? php par exemple ...
ça éviterais d'ajouter des script Totalement inutile au navigateur ... Javascript est plus en adéquation avec la gestion dynamique de l'interface que l'implémentation d'un élément "static" ...

Enfin, c'est mon avis, mais je peux aussi me tromper ^^

Oui, tu as tout à fait raison

C'est effectivement plus sensé de gérer cela coté serveur...

**cincap** · 06/02/2010, 11h07

Bonjour à toutes et à tous,

@ Bovino et SpaceFrog,

merci de cette solution que je testerai cet après midi avant de fermer ce topic.

@ SpaceFrog,

tu as l'art de simplifier le code alors que j'étais parti sur plus compliquer.

J'ai donc fait ceci, mais dans cet état, je ne pense pas que la page va se rafraîchir ?

L'image "Fond.jpg" s'affiche !

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
 
<script LANGUAGE="JavaScript" > 
var heure=new Date().getHours();
document.body.style.backgroundImage=(heure<8 && heure>19)?"url(Fondnuit.jpg)":"url(Fond.jpg)";
</script>
</HEAD>
<BODY  bgcolor="#000000" bgproperties="fixed" topmargin="5">
</BODY>

@ Nours312

Si vous me permettez une intrusion : POURQUOI en JavaScript ??

Tu as tout à fait raison, mais j'appelle une page Html dans une fiche codée avec Delphi, sur cette page Html, il y a comme animation une horloge qui se promène suivant la position du curseur.

Je devais donc intervenir en JavaScript puisque le code de départ l'est.

@+,

Cincap

**Bovino** · 06/02/2010, 11h16

Ta solution ne peut pas fonctionner car lorsque tu fixes le background sur le body, celui-ci n'existe pas encore dans ton document !

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
<script LANGUAGE="JavaScript" > 
function setBckGrnd(){
    var heure=new Date().getHours();
    document.body.style.backgroundImage=(heure<8 && heure>19)?"url(Fondnuit.jpg)":"url(Fond.jpg)";
}
</script>
</HEAD>
<BODY  bgcolor="#000000" bgproperties="fixed" topmargin="5" onload="setBckGrnd()">
</BODY

Attention aussi, les attributs de style (bgcolor bgproperties...) au-delà d'être fortement déconseillées, peuvent entrer en conflit avec les règles CSS...

**cincap** · 06/02/2010, 11h50

@ Bovino, si je fais comme tu dis, je n'ai plus aucun affichage de l'image.

Mon code :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
 
<script LANGUAGE="JavaScript" > 
 function setBckGrnd(){   
    var heure=new Date().getHours();
    document.body.style.backgroundImage=(heure<8 && heure>19)?"url(Data/Fondnuit.jpg)":"url(Data/Fond.jpg)";
}
</script>
</HEAD>
<BODY  bgcolor="#000000" bgproperties="fixed" topmargin="5" onload="setBckGrnd()">
</BODY>

A ne rien comprendre.

@+,

Cincap

**SpaceFrog** · 06/02/2010, 11h50

pour gerer ça coté serveur il faut que le serveur soit calé sur le même fuseau horaire que le client ou alors sniffer l'heure du client, autant le faire directement en js ce qui evite un aller retour.

**cincap** · 06/02/2010, 12h09

@ Spacefrog, en fait cette page Htlm est simplement affichée dans ma fiche Delphi ou j'ai déjà un code Javascript qui gère l'heure et la date.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 
ClockAndAssign();
setTimeout('Delay()',10);
}
if (ns||ie)window.onload=Delay;

Je dois certainement appliquer le new code dans celui qui existe déjà pour l'horloge, mais où ?

Je vais tester cela, car quand j'enlève le 1er code horloge mon image s'affiche bien comme vous l'avez suggéré avec le new code.

Edit: je viens d'insérer le new code dans le 1er et je n'ai pas d'erreur et l'image "Fond.jpg" s'affiche, je vais voir comment tricher sur l'heure pour constater que "Fondnuit.jpg" s'affiche.

@+,

Cincap

**cincap** · 06/02/2010, 13h46

Bon je viens de faire le test des deux propositions avec une new page.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
 
<script LANGUAGE="JavaScript" >
function setBckGrnd(){
    var heure=new Date().getHours();
    document.body.style.backgroundImage=(heure<8 && heure>19)?"url(Data/Fondnuit.jpg)":"url(Data/Fond.jpg)";
}
</SCRIPT> 
</HEAD>
<BODY  bgcolor="#000000" bgproperties="fixed" topmargin="5" onload="setBckGrnd()">

ou :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
<script LANGUAGE="JavaScript" >
function setBckGrnd(){
 var heure=new Date().getHours();
switch(heure<8 && heure>19){
case true:
document.body.style.backgroundImage="url(Data/Fondnuit.jpg)";
break;
case false:
document.body.style.backgroundImage="url(Data/Fond.jpg)";
break;
}
}
</SCRIPT>
</HEAD>
<BODY  bgcolor="#000000" bgproperties="fixed" topmargin="5" onload="setBckGrnd()">

Seul l'image "Fond.jpg" s'affiche même si je change l'heure dans les propriétés Windows (ex: 22H).

@+,

Cincap

**nours312** · 06/02/2010, 15h11

pour gerer ça coté serveur il faut que le serveur soit calé sur le même fuseau horaire que le client ou alors sniffer l'heure du client, autant le faire directement en js ce qui evite un aller retour.

Je ne pensais Juste pas que ct à la seconde prés !... cela dit, il est vrai que ça évite les pb de décalages Horaire et tout le toutim ^^

j'ai déjà un code Javascript qui gère l'heure et la date.

ok, dans ce cas, il serait sympa que tu la couple directement avec ton Horloge et envisager l'appel de ta fonction à Heure fixe en plus d'un appel au chargement, ça permettrait ainsi de changer "en Live" le Fond arrivé à 19H et/ou 8h00 ... py par la suite pourquoi ne pas proposer un fond différent pour toutes les heures de la journée !? lol ^^

heure<8 && heure>19

comment peut-elle etre à la fois inférieur à 8 et supérieur à 19 !??

(heure<8 || heure>19) devrait mieux fonctionner

@++

**cincap** · 06/02/2010, 15h43

@ Nours312, merci de ta réponse, en effet cela est bien mieux comme cela tu as vu juste,

en mettant 19H30 pas de changement par contre dès 20H, l'image nuit s'affiche, enfin cela ne doit pas être rigoureux ce changement d'affichage.

par la suite pourquoi ne pas proposer un fond différent pour toutes les heures de la journée !?

Pas dans mon cas car je n'ai besoin que de différencier l'affichage de 8H du matin à 19H.

Je vais tester avant de fermer ce topic mais je pense que c'était cette correction qu'il fallait.

Merci encore à tous.

@+,

Cincap

**nours312** · 06/02/2010, 21h16

si tu veux que ça change à 19H soit tu met heure>18, soit tu met heure>=19

logique non ?

**cincap** · 07/02/2010, 11h46

Bonjour à toutes et à tous,

@ Nours312, il va de soit, logique.

Pour ma part j'ai testé en incluant ce code dans le code Horloge tout en reprenant les variables existantes et cela fonctionne correctement.

Il serait judicieux et curieux de voir comment le faire en divisant la journée en 3 parties (matin, après midi et soir).

Ceci étant dit, je remercie tout le monde.

Je ferme le topic.

@+,

Cincap

**SpaceFrog** · 07/02/2010, 11h57

avec un switch

**cincap** · 07/02/2010, 12h20

@ SpaceFrog, salut,

avec un switch

Désolé mais je suis ignorant avec le Javascript, en tenant compte de ce code qui fonctionne, il suffirait d'insérer un swich (une commande) :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
document.body.style.backgroundImage=(hr<=8 || hr>=19)?"url(Data/Fondnuit.jpg)":"url(Data/Fondjour.jpg)";

Peut être comme ceci :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
 
if ((heure>=0) && (heure<8) && (minute<60) && (seconde<60)) {
image='<img src="nuit.jpg">';
}
if ((heure>19) && (heure<24) && (minute<60) && (seconde<60)) {
image='<img src="nuit.jpg">';
}

Je testerai à l'occasion.

Encore merci pour tes conseils,

@+,

Cincap

**cincap** · 07/02/2010, 14h05

J'obtiens un bon résultat avec ceci :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
 
if ((hr>=8) && (hr<=13) && (mins<60) && (secs<60)) {
document.body.style.backgroundImage= "url(Data/Fondjour.jpg)";
}
if ((hr>=13) && (hr<=19) && (mins<60) && (secs<60)) {
document.body.style.backgroundImage= "url(Data/Fondcoucher.jpg)";
}
if ((hr>=19) && (hr<=8) && (mins<60) && (secs<60)){
document.body.style.backgroundImage= "url(Data/Fondnuit.jpg)";
}

Il y a certainement plus simple pour les cracks de ce forum !

@+,

Cincap

Changer le background suivant jour et nuit

JavaScript

Discussions similaires

Partager

Partager