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 :

on rajoute un 0

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

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 :

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

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

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

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

Envoyé par lanonyme

Beau boulot Auteur

Merci

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

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

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

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 :

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 :

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.