Affichage d'heure

**sarrasin.drums** · 03/03/2010, 18h09

Bonjour,

Après une après-midi de recherche, je n'ai pas trouvé ce qui cloche, et pourtant ça doit être simple....

Voici le script que j'ai inséré dans mon fichier "fonction.js" :

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
21
 
function horloge()
{
	horloge = new Date;
	heure = horloge.getHours();
	minutes = horloge.getMinutes();
	secondes= horloge.getSeconds();
 
	if (heure<10) heure="0"+heure;
	if (minutes<10) minutes="0"+minutes;
	if (secondes<10) secondes="0"+secondes;
}
 
function affiche_horloge()
{
	horloge();
	affiche_heure = (heure + ":" + minutes + ":" + secondes);
	document.write(affiche_heure);
	setTimeout("affiche_horloge()",1000);
 
}

Voici le script que j'ai inséré dans mon fichier "index.htm" :

Code :

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

1
2
3
4
 
<script LANGUAGE="Javascript">
       affiche_horloge();
</script>

Inutile de préciser que la souce .js a été déclarée entre les balises <head> et </head>.

Et bien évidemment, l'affichage ne marche pas comme il le faudrait... Pire, j'ai le message "Fonction attendue", mais je ne vois pas pourquoi.

Pouvez-vous m'aider, car j'imagine que ce souci a dû déjà être résolu, mais dans tous les forums que je trouve, les personnes disent que c'est ok, mais sans donner la soluce...
Ce que je voudrais, c'est que l'affichage change chaque seconde, grâce au settimeout, mais c'est lui qui m'embête..

Merci d'avance.

**Bovino** · 03/03/2010, 19h40

Tout d'abord, déclare tes variables avec var, ce sera plus propre...
Ensuite, document.write() n'est pas vraiment adapté (en dehors du fait qu'il serait bon, un jour, d'oublier cette méthode).
Lorsque tu l'appelles quand le DOM a déjà été construit, cela t'efface ta page, donc ta fonction appelée par setTimeout n'existe plus.

**sarrasin.drums** · 04/03/2010, 21h03

Bonsoir et merci Bovino de ton intérêt pour mon pb, surtout pour la syntaxe, que j'ai de suite corrigé. Cela dit, je ne suis pas plus avancé que ça...

Qu'est-ce que je dois changer pour que ça marche ?

**A-Imperator** · 05/03/2010, 00h14

Bonsoir!

En effet, petit souci avec ton nommage tout d'abord.
Ta fonction se nomme horloge, et tu as une variable du même nom....
A éviter je pense.

Ensuite, à la place du document.write, essaye ceci:

Code :

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

document.getElementById("horloge").innerHTML = affiche_heure;

et dans ta balise body je mettrais

Code :

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

1
2
3
4
5
 
<body onload="affiche_horloge()">
 <div id="horloge">
 </div>
</body>

Comme ça, pas besoin des balises script dans ton index...

Ça doit fonctionner!

**sarrasin.drums** · 13/03/2010, 15h55

Bonjour, et merci A-Impérator pour tes conseils !!
J'ai enfin trouvé la solution. Donc je vous livre les détails :

Dans le source HTML, j'ai mis ça dans la section HEAD :

Code :

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

1
2
3
 
<script type="text/javascript"  src='fonction.js'></script>   
<link rel="stylesheet" type="text/css" href="fonction.css"></link>

et ça dans la section BODY :

Code :

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

1
2
3
4
5
6
 
<body onload="calcul_horloge();> 
 
<div id="horloge_du_jour"> 
     calcul_horloge()
</div>

Dans le source fonction.js, j'ai corrigé comme ça :

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
 
function calcul_horloge()
{
	var horloge = new Date();
	var heure = horloge.getHours();
	var minutes = horloge.getMinutes();
	var secondes= horloge.getSeconds();
 
	if (heure<10) heure="0"+heure;
	if (minutes<10) minutes="0"+minutes;
	if (secondes<10) secondes="0"+secondes;
 
	heure_jour = heure + ":" + minutes + ":" + secondes;
	document.getElementById("horloge_du_jour").innerHTML=heure_jour;
	setTimeout("calcul_horloge()",1000) ;
 
}

Pour ceux qui savent, cela va certainement leur paraître ridicule, mais pour les néophytes comme moi, une explication supplémentaire, qui fait défaut dans beaucoup de réponses sur les forum que j'ai visité :

"horloge_du_jour" est l'Id figurant dans le source fonction.css, où j'ai codé ça :

Code :

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

1
2
3
4
5
6
7
8
9
10
 
#horloge_du_jour
{
  width:177px; 
  height:30px; 
  position:absolute;
  left:784px;
  top:140px;
  background-color: green;
}

Voilà ! Merci encore à tous.

**laurentSc** · 26/08/2013, 23h08

+1 car + de 3 ans après ce post, je l'ai réutilisé en le modifiant un peu ; ma spéc était un affichage du genre :

nous sommes le 26 août 2013
22:15:33

ceci étant rafraichi à chaque seconde. Et voici un code qui ferait hurler tous les puristes (contrainte : tout le code dans le body et rien dans le head) :

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
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
<!DOCTYPE html>
<html>
  <head>
    <meta content="text/html; charset=windows-1252" http-equiv="content-type">
    <title></title>
 
  </head>
  <body>
  	<SCRIPT LANGUAGE="JavaScript"> 
<!-- 
/*Script téléchargé sur EasyScript (www.easy-script.com)*/ 
var today; 
today = new Date(); 
 
var d=new Date();
var month=new Array();
month[0]="January";
month[1]="February";
month[2]="March";
month[3]="April";
month[4]="May";
month[5]="June";
month[6]="July";
month[7]="August";
month[8]="September";
month[9]="October";
month[10]="November";
month[11]="December";
var n = month[d.getMonth()];
 
document.write("Nous sommes le ", today.getDate()," ",n," ",today.getYear()) 
 
 
//--> 
</SCRIPT> 
    <script>function calcul_horloge()
{
	var horloge = new Date();
	var heure = horloge.getHours();
	var minutes = horloge.getMinutes();
	var secondes= horloge.getSeconds();
 
	if (heure<10) heure="0"+heure;
	if (minutes<10) minutes="0"+minutes;
	if (secondes<10) secondes="0"+secondes;
 
	heure_jour = heure + ":" + minutes + ":" + secondes;
	document.getElementById("horloge_jour").innerHTML=heure_jour;
	setTimeout("calcul_horloge()",1000) ;
 
} </script>
    <style>
      #horloge_du_jour
{
  width:177px; 
  height:30px; 
  position:absolute;
  left:784px;
  top:140px;
  background-color: green;
} </style>
  <script>
  windows.onload=calcul_horloge;
  </script>
    <div id="horloge_jour" class="horloge_du_jour">
      <script>calcul_horloge();</script> </div>
 
  </body>
</html>

Affichage d'heure

JavaScript

Vue hybride

Discussions similaires

Partager

Partager