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 ^^

Changer le background suivant jour et nuit

JavaScript

Vue hybride

Discussions similaires

Partager

Partager