[FAQ] Comment afficher l'heure en temps réel ? [Fait]

Auteur · 16/11/2012, 23h27

http://javascript.developpez.com/faq...e=date#Horloge

Les variables du code ne sont pas déclarées (il manque le mot-clef var). Il y a également la présence d'une variable timerRunning dans la fonction. Je me suis demandé s'il fallait la supprimer car on peut se demander quel est son rôle.... Puis je l'ai déclarée globale et initialisée à false, je pense qu'ainsi on comprend mieux sa présence.
Je me permets d'ajouter que l'autre syntaxe possible de setInterval() utilisé dans l'exemple est
Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part
```
var timerID = setInterval("runClock()","1000");
```
(avec des guillemets pour les arguments).
Il y a également une petite faute d'orthographe dans le commentaire du code (il manque un "s" dans "le nombre de minute")
Par ailleurs, est-ce que le terme timer prend un "s" au pluriel car c'est un mot anglais (j'ai toutefois laissé le "s" dans ma proposition de correction) ?
Dans le commentaire du code il est écrit :

Citation:

on rajoute un 0

, personnellement, je préfère le verbe "ajouter" à "rajouter" donc :

Citation:

on ajoute un 0
Il faut également mettre à jour le code source correspondant :
http://javascript.developpez.com/tel...-en-temps-reel

Voici ma proposition de correction :

Citation:

Les timers JavaScript permettent d'exécuter des fonctions à des intervalles de temps donnés. Ainsi, pour notre horloge, nous allons utiliser setInterval qui se déclenchera toutes les 1000ms pour mettre à jour l'heure affichée sur l'horloge.

Voici la fonction pour afficher l'heure :

Code javascript :

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
 
var timerRunning = false;
function runClock() 
{
  var today   = new Date();
  var hours   = today.getHours();
  var minutes = today.getMinutes();
  var seconds = today.getSeconds();
  var timeValue = hours;
 
  // Les deux prochaines conditions ne servent que pour l'affichage.
  // Si le nombre de minutes est inférieur à 10, alors on ajoute un 0 devant...
 
  timeValue += ((minutes < 10) ? ":0" : ":") + minutes;
  timeValue += ((seconds < 10) ? ":0" : ":") + seconds;
  document.getElementById("time").value = timeValue;
  timerRunning = true;
}
 
var timerID = setInterval(runClock,1000);

Et voici le champ texte :

Code html :

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

<input type="text" id="time" size="10" />

Remarque :
Une autre syntaxe possible de la fonction setInterval() utilisée dans l'exemple est

Code javascript :

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

var timerID = setInterval("runClock()","1000");

(avec des guillemets pour les arguments).

Bovino · 17/11/2012, 09h54

Citation:

Envoyé par Auteur

[list][*]Je me permets d'ajouter que l'autre syntaxe possible de setInterval() utilisé dans l'exemple est

Code javascript :

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

var timerID = setInterval("runClock()","1000");

(avec des guillemets pour les arguments).

Je ne suis pas sûr que ce soit très opportun : utiliser une chaine de caractère en premier argument est fortement déconseillé et à éviter au maximum...

Auteur · 17/11/2012, 14h16

Citation:

Envoyé par Bovino

Je ne suis pas sûr que ce soit très opportun : utiliser une chaine de caractère en premier argument est fortement déconseillé et à éviter au maximum...

Ok dans ce cas, on retire la remarque que j'ai ajoutée.

vermine · 17/11/2012, 16h26

Je vais attendre que toute la section sur les dates soit relue (c'est peut-être déjà le cas) afin de faire les modifications en une fois.

Auteur · 17/11/2012, 17h46

Citation:

Envoyé par vermine

Je vais attendre que toute la section sur les dates soit relue (c'est peut-être déjà le cas) afin de faire les modifications en une fois.

Pas encore. Je te préviendrai par MP quand j'aurai fini

lanonyme · 23/11/2012, 23h00

Beau boulot Auteur

Juste une remarque dans la rédaction des Q/R, je pense qu'il faudrait garder une certaine homogénéité "dans l'aspect" quand nous écrivons en dehors du code le nom des fonctions/méthodes que nous utilisons.

Pour être plus clair :

getTime() => gras
et
SetInterval => identique au reste du texte

J'écris peut être pas au bon endroit, mais c'est relisant cette Q/R que j'ai remarqué ce petit détail

Auteur · 24/11/2012, 10h40

Citation:

Envoyé par lanonyme

Beau boulot Auteur

Merci

Citation:

Envoyé par lanonyme

Juste une remarque dans la rédaction des Q/R, je pense qu'il faudrait garder une certaine homogénéité "dans l'aspect" quand nous écrivons en dehors du code le nom des fonctions/méthodes que nous utilisons.

Je n'avais pas fait à attention à ce détail

Citation:

Envoyé par lanonyme

J'écris peut être pas au bon endroit, mais c'est relisant cette Q/R que j'ai remarqué ce petit détail

oui et non... C'est vermine qui est chargé de mettre à jour la FAQ en fonction des commentaires que l'on poste. Je pense qu'il verra ta remarque

vermine · 24/11/2012, 12h00

Remarque judicieuse et postée au bon endroit. Merci.

Je dois effectivement faire attention à ce genre de choses. Par contre, je viens de faire tilt que c'est la totalité des Q/R que je vais devoir passer en revue et non pas uniquement celles qui auront été mises à jour.

Auteur · 24/11/2012, 12h22

Citation:

Envoyé par vermine

Par contre, je viens de faire tilt que c'est la totalité des Q/R que je vais devoir passer en revue et non pas uniquement celles qui auront été mises à jour.

Auteur · 07/12/2012, 13h13

Proposition définitive de correction

Citation:

Les timers JavaScript permettent d'exécuter des fonctions à des intervalles de temps donnés. Ainsi, pour notre horloge, nous allons utiliser setInterval() qui se déclenchera toutes les 1000ms pour mettre à jour l'heure affichée sur l'horloge.

Voici la fonction pour afficher l'heure :

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
var timerRunning = false;
function runClock() 
{
  var today   = new Date();
  var hours   = today.getHours();
  var minutes = today.getMinutes();
  var seconds = today.getSeconds();
  var timeValue = hours;
 
  // Les deux prochaines conditions ne servent que pour l'affichage.
  // Si le nombre de minutes est inférieur à 10, alors on ajoute un 0 devant...
 
  timeValue += ((minutes < 10) ? ":0" : ":") + minutes;
  timeValue += ((seconds < 10) ? ":0" : ":") + seconds;
  document.getElementById("time").value = timeValue;
  timerRunning = true;
}
 
var timerID = setInterval(runClock,1000);

Et voici le champ texte :

Code html :

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

<input type="text" id="time" size="10" />

j'ai mis en forme la fonction setInterval() dans le texte

j'ai supprimé ma remarque sur l'autre syntaxe possible des arguments de setInterval()

Si vous n'avez plus de remarques à formuler, je mettrai le sujet

Bovino · 07/12/2012, 13h48

C'est ni pour faire mon chieur ni pour me mettre en avant, mais je préfère la version donnée dans ce post Affichage d'une horloge, notamment l'utilisation de toLocaleTimeString()...

Auteur · 07/12/2012, 15h53

Il y a également

toLocaleString() qui affiche en plus la date
toTimeString()

que faire ? On précise les 3 fonctions ? Je supprime l'exemple ?

Bovino · 07/12/2012, 16h05

AMHA, le mieux serait de modifier le libellé : "Comment afficher la date ou l'heure en temps réel ?" et effectivement aborder les trois (quatre en fait) méthodes prévues : toString(), toTimeString(), toLocaleString() et toLocaleTimeString().

vermine · 10/12/2012, 08h22

Cette proposition me convient.

Auteur · 11/12/2012, 05h15

Cela donnerait donc :

Citation:

Comment afficher la date ou l'heure en temps réel ?

L'objet Date() contient 4 fonctions qui permettent d'afficher l'heure et le jour selon les cas.
Les 4 fonctions qui affichent l'heure sont :

toString() : date en anglais, heure (hh:mm:ss) et fuseau horaire ;
toTimeString() : heure (hh:mm:ss) au format 24h si navigateur en français et fuseau horaire ;
toLocaleString() : date dans la langue du système, heure (hh:mm:ss) au format 24h si navigateur en français ;
toLocaleTimeString() : heure (hh:mm:ss) au format 24h si navigateur en français.

Exemple :
Afficher et mettre à jour toutes les secondes l'heure du système.

Code html :

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
 
<head>
 
<title>Horloge</title>
 
<meta http-equiv="Content-type" content="application/xhtml+xml; charset=ISO-8859-1" />
<meta http-equiv="Content-Language" content="fr" />
<meta name="Author" content="www.developpez.com" />
 
<script type="text/javascript">
function horloge()
{
	var tt = new Date().toLocaleTimeString();// hh:mm:ss
 
	document.getElementById("timer").innerHTML = tt;
	setTimeout(horloge, 1000); // mise à jour du contenu "timer" toutes les secondes
}
</script> 
 
 
<style type="text/css">
<!--
#timer{
	position: absolute;
	right: 50px;
	top: 50px;
	background-color: silver;
	font-weight: bold;
	padding: 5px 10px;
	border: 3px groove;
}
 
-->
</style> 
 
 
</head>
 
<body onload="horloge()"> <!-- lancement du script lors du chargement de la page -->
 
<div id="timer"></div>
 
</body>
</html>

J'aimerai que vous me confirmiez l'affirmation que j'ai écrite :

Citation:

heure (hh:mm:ss) au format 24h si navigateur en français

.
J'ai un OS en français, si je change le format de l'heure (AM/PM au lieu de 24h), l'heure est tout de même affichée au format 24h dans le navigateur. Donc je voudrais être sûr que le format d'affichage de l'heure ne dépend que de la langue du navigateur.

Auteur · 19/01/2013, 17h51

Comme il n'y a aucune remarque postée depuis plus d'un mois je pense que l'on peut mettre à jour cette Q/R dans la FAQ.

vermine · 21/02/2013, 15h32

Voici ce que ça va donner. Je n'ai pas encore mis le fichier exemple donc c'est normal que le lien plante.

C'est ok ?

Auteur · 21/02/2013, 17h13

Citation:

Envoyé par vermine

Voici ce que ça va donner. Je n'ai pas encore mis le fichier exemple donc c'est normal que le lien plante.

C'est ok ?

Moi ça me convient

17/11/2012, 16h26	#4
vermine Responsable JavaScript & AJAX Inscription : mars 2008 Messages : 3 995 Détails du profil Informations personnelles : Âge : 28 Informations forums : Inscription : mars 2008 Messages : 3 995 Points : 27 766 Points : 27 766	Je vais attendre que toute la section sur les dates soit relue (c'est peut-être déjà le cas) afin de faire les modifications en une fois. __________________ Médias : influence, pouvoir et fiabilité - Découvrez MooTools - Le mathématicien et ses esclaves Elen Poukram - Isegoria - Sandawe
	00

23/11/2012, 23h00	#6
lanonyme Membre confirmé Inscription : avril 2006 Messages : 218 Détails du profil Informations personnelles : Âge : 30 Informations forums : Inscription : avril 2006 Messages : 218 Points : 241 Points : 241	Beau boulot Auteur Juste une remarque dans la rédaction des Q/R, je pense qu'il faudrait garder une certaine homogénéité "dans l'aspect" quand nous écrivons en dehors du code le nom des fonctions/méthodes que nous utilisons. Pour être plus clair : getTime() => gras et SetInterval => identique au reste du texte J'écris peut être pas au bon endroit, mais c'est relisant cette Q/R que j'ai remarqué ce petit détail __________________ La référence pour la recherche sur DVP Vous utilisez Borland C++ Builder... un p'tit tour par la Pour passer le temps : LE Site \| Le petit forum pour les remarques
	10

24/11/2012, 12h00	#8
vermine Responsable JavaScript & AJAX Inscription : mars 2008 Messages : 3 995 Détails du profil Informations personnelles : Âge : 28 Informations forums : Inscription : mars 2008 Messages : 3 995 Points : 27 766 Points : 27 766	Remarque judicieuse et postée au bon endroit. Merci. Je dois effectivement faire attention à ce genre de choses. Par contre, je viens de faire tilt que c'est la totalité des Q/R que je vais devoir passer en revue et non pas uniquement celles qui auront été mises à jour. __________________ Médias : influence, pouvoir et fiabilité - Découvrez MooTools - Le mathématicien et ses esclaves Elen Poukram - Isegoria - Sandawe
	00

07/12/2012, 13h48	#11
Bovino Responsable Développement Web Didier Mouronval Développeur Web Inscription : juin 2008 Messages : 18 153 Détails du profil Informations personnelles : Nom : Didier Mouronval Âge : 42 Localisation : France, Gironde (Aquitaine) Informations professionnelles : Activité : Développeur Web Secteur : High Tech - Éditeur de logiciels Informations forums : Inscription : juin 2008 Messages : 18 153 Points : 65 012 Points : 65 012	C'est ni pour faire mon chieur ni pour me mettre en avant, mais je préfère la version donnée dans ce post Affichage d'une horloge, notamment l'utilisation de toLocaleTimeString()... __________________ Pas de question technique par MP ! Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi ! Vous possédez un blog et aimeriez diffuser vos billets sur le forum, contactez-moi ! Mes formations video2brain : La formation complète sur JavaScript • JavaScript et le DOM par la pratique • PHP 5 et MySQL : les fondamentaux Mon livre sur jQuery
	00

07/12/2012, 15h53	#12
Auteur Expert Confirmé Sénior Inscription : avril 2004 Messages : 5 158 Détails du profil Informations personnelles : Localisation : France Informations forums : Inscription : avril 2004 Messages : 5 158 Points : 5 605 Points : 5 605	Il y a également toLocaleString() qui affiche en plus la date toTimeString() que faire ? On précise les 3 fonctions ? Je supprime l'exemple ?
	00

07/12/2012, 16h05	#13
Bovino Responsable Développement Web Didier Mouronval Développeur Web Inscription : juin 2008 Messages : 18 153 Détails du profil Informations personnelles : Nom : Didier Mouronval Âge : 42 Localisation : France, Gironde (Aquitaine) Informations professionnelles : Activité : Développeur Web Secteur : High Tech - Éditeur de logiciels Informations forums : Inscription : juin 2008 Messages : 18 153 Points : 65 012 Points : 65 012	AMHA, le mieux serait de modifier le libellé : "Comment afficher la date ou l'heure en temps réel ?" et effectivement aborder les trois (quatre en fait) méthodes prévues : toString(), toTimeString(), toLocaleString() et toLocaleTimeString(). __________________ Pas de question technique par MP ! Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi ! Vous possédez un blog et aimeriez diffuser vos billets sur le forum, contactez-moi ! Mes formations video2brain : La formation complète sur JavaScript • JavaScript et le DOM par la pratique • PHP 5 et MySQL : les fondamentaux Mon livre sur jQuery
	00

10/12/2012, 08h22	#14
vermine Responsable JavaScript & AJAX Inscription : mars 2008 Messages : 3 995 Détails du profil Informations personnelles : Âge : 28 Informations forums : Inscription : mars 2008 Messages : 3 995 Points : 27 766 Points : 27 766	Cette proposition me convient. __________________ Médias : influence, pouvoir et fiabilité - Découvrez MooTools - Le mathématicien et ses esclaves Elen Poukram - Isegoria - Sandawe
	00

19/01/2013, 17h51	#16
Auteur Expert Confirmé Sénior Inscription : avril 2004 Messages : 5 158 Détails du profil Informations personnelles : Localisation : France Informations forums : Inscription : avril 2004 Messages : 5 158 Points : 5 605 Points : 5 605	Comme il n'y a aucune remarque postée depuis plus d'un mois je pense que l'on peut mettre à jour cette Q/R dans la FAQ.
	00

21/02/2013, 15h32	#17
vermine Responsable JavaScript & AJAX Inscription : mars 2008 Messages : 3 995 Détails du profil Informations personnelles : Âge : 28 Informations forums : Inscription : mars 2008 Messages : 3 995 Points : 27 766 Points : 27 766	Voici ce que ça va donner. Je n'ai pas encore mis le fichier exemple donc c'est normal que le lien plante. C'est ok ? __________________ Médias : influence, pouvoir et fiabilité - Découvrez MooTools - Le mathématicien et ses esclaves Elen Poukram - Isegoria - Sandawe
	10

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email