Affichage d'heure

Version imprimable

Affichage d'heure

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:

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:

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.

03/03/2010, 19h40
Bovino

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.
04/03/2010, 21h03
sarrasin.drums

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 ?
05/03/2010, 00h14
A-Imperator
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:

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

et dans ta balise body je mettrais
Code:

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!

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:

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:

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:

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:

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.

+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 :

Citation:

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:

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>