Date et heure en temps réel sur une bande noire !

**cincap** · 10/02/2014, 18h22

Bonsoir à toutes et à tous,

Avec ce code, j'affiche une banderolle de couleur noire avec la date à droite et l'heure à gauche.

J'ai constaté que l'heure et la date restent fixe alors que un setTimeOut est prévu.

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
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
 
  <meta charset="UTF-8">
  <title>VIDEO SURVEILLANCE</title>
 
 
  <style type="text/css">
#banderole {
background-color:black;
min-width:720px;
}
#banderole .heure {
color:rgb(0,0,255);
font-size:32px;
float:left;
margin-left: 10;
}
#banderole .date {
color:rgb(0,0,255);
font-size:32px;
float:right;
margin-right: 10;
}
#banderole .titre {
color:rgb(255,255,255);
text-align:center;
}
  </style>
  <script language="javascript">
<!-- Begin
function disp_horloge(id){
if (!document.layers && !document.all) return;
var date_jour=new Date()
var heure=date_jour.getHours();
var min=date_jour.getMinutes();
var sec=date_jour.getSeconds();
if (heure<10) heure="0"+heure;
if (min<10) min="0"+min;
if (sec<10) sec="0"+sec;
function don_date_jour()
{var date_jour=new Date();
date_jour=don_date_format(date_jour);
return date_jour;}
function don_date_format(d1) {
var m=new Array(13);
m[1]="Janvier"; m[2]="Février"; m[3]="Mars"; m[4]="Avril"; m[5]="Mai"; m[6]="Juin";
m[7]="Juillet"; m[8]="Aout"; m[9]="Septembre"; m[10]="Octobre"; m[11]="Novembre"; m[12]="Décembre";
var d=new Array(8);
d[1]="Dimanche"; d[2]="Lundi"; d[3]="Mardi"; d[4]="Mercredi"; d[5]="Jeudi"; d[6]="Vendredi"; d[7]="Samedi";
var mois=m[d1.getMonth()+1];
var jour=d[d1.getDay()+1];
var date=d1.getDate();
var an=d1.getYear();
if (an<200) an=1900+an;
date=jour+" "+date+" "+mois+" "+an;
return date;
}
dispTime=heure+":"+min+":"+sec;
dispdato= don_date_jour()
if (document.layers) {
document.layers.pendule.document.write(dispTime);
document.layers.pendule.document.close();
document.layers.pendule2.document.write(dispdato);
document.layers.pendule2.document.close();
}
else
if (document.all)
pendule.innerHTML = dispTime;
pendule2.innerHTML = dispdato;
setTimeout("disp_horloge()",1000);
}
// End --> </script>
</head>
 
 
<body onload="disp_horloge()">
 
<div id="banderole">
<span id="pendule2" class="date">24/08/2013</span>
<span id="pendule" class="heure">12:34</span>
<h1 class="titre">VIDEO SURVEILLANCE</h1>
 
</div>
 
</body>
</html>

Si quelqu'un avait une petite idée ou une autre façon de faire, merci d'avance.

@+,

Cincap

**SylvainPV** · 10/02/2014, 19h05

Un effort sur l'indentation SVP

Code :

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

1
2
3
4
5
if (document.layers) {        document.layers.pendule.document.write(dispTime);
        document.layers.pendule.document.close();
        document.layers.pendule2.document.write(dispdato);
        document.layers.pendule2.document.close();
    } else  if (document.all)  pendule.innerHTML = dispTime;

Ce code n'est plus du tout d'actualité, et j'ai l'impression qu'il y a une accolade ouvrante oubliée. Il y a un paramètre id qui est passé dans la fonction disp_horloge mais qui ne semble jamais utilisé.

**Eric2a** · 10/02/2014, 19h18

Salut,

Je jette le code optimisé.

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
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
<!DOCTYPE html>
<html>
<head> 
	<meta charset="UTF-8">
	<title>VIDEO SURVEILLANCE</title>
	<style type="text/css">
                #banderole {
                        background-color:black;
                        min-width:720px;
                }
                #banderole .heure {
                        color:rgb(0,0,255);
                        font-size:32px;
                        float:left;
                        margin-left: 10;
                }
                #banderole .date {
                        color:rgb(0,0,255);
                        font-size:32px;
                        float:right;
                        margin-right: 10;
                }
                #banderole .titre {
                        color:rgb(255,255,255);
                        text-align:center;
                }
        </style>
	<script type="text/javascript">//<![CDATA[
                function disp_horloge(){
                        var m=["Janvier","Février","Mars","Avril","Mai","Juin","Juillet","Aout","Septembre","Octobre","Novembre","Décembre"];
                        var d=["Dimanche","Lundi","Mardi","Mercredi","Jeudi","Vendredi","Samedi"];
 
                        var date_jour=new Date()
 
                        var heure=date_jour.getHours();
                        var min=date_jour.getMinutes();
                        var sec=date_jour.getSeconds();
                        if(heure<10)heure="0"+heure;
                        if(min<10)min="0"+min;
                        if(sec<10)sec="0"+sec;
 
                        var mois=m[date_jour.getMonth()];
                        var jour=d[date_jour.getDay()];
                        var date=date_jour.getDate();
                        var an=date_jour.getYear();
                        if(an<200)an=1900+an;
 
                        pendule.innerHTML=heure+":"+min+":"+sec;
                        pendule2.innerHTML=jour+" "+date+" "+mois+" "+an;;
                        setTimeout(disp_horloge,1000);
                }
                //]]>
        </script>
</head>
<body onload="disp_horloge()">
	<div id="banderole">
		<span id="pendule2" class="date">24/08/2013</span>
		<span id="pendule" class="heure">12:34</span>
		<h1 class="titre">VIDEO SURVEILLANCE</h1>
	</div>
</body>
</html>

Pour la compréhension du code, je préfère t'inviter à suivre les cours de DVP.

**cincap** · 10/02/2014, 22h00

Bonsoir,

Merci les amis des conseils toujours valorisants.

Je suis plus orienté Delphi mais des fois dans ce langage, je dois utiliser du JavaScript.

Merci aussi pour l'aide, je vous tiens au courant car il se fait tard pour tester.

@+,

Cincap

**cincap** · 11/02/2014, 05h57

Bonjour à toutes et à tous,

@ SylvainPV et Eric2a, merci pour les conseils, cela fonctionne nickel.

Petite question, si le code javascript est dans un fichier *.js et est poster sur un site, est ce que l'heure et la date sera prise en compte ?

Sinon si je désire la date sur le format 11/02/2014, ce serait aussi possible me semble t'il.

En tous les cas, cela fonctionne.

@+,

Cincap

**Eric2a** · 11/02/2014, 18h50

Re,

Que le script soit externe ou intégré à la page ne changera rien. Pas de souci de ce côté là.

Ci-dessous le code modifié afin de prendre en compte le format JJ/MM/AAAA

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
function disp_horloge(p){
	var
		month=['Janvier','Février','Mars','Avril','Mai','Juin','Juillet','Aout','Septembre','Octobre','Novembre','Décembre'],
		day=['Dimanche','Lundi','Mardi','Mercredi','Jeudi','Vendredi','Samedi'],
		now,H,i,s,d,m,Y;
 
	var fr=typeof p!=='undefined';
 
	function go(){
		now=new Date()
 
		H=now.getHours();
		i=now.getMinutes();
		s=now.getSeconds();
 
		if(H<10)H='0'+H;
		if(i<10)i='0'+i;
		if(s<10)s='0'+s;
 
		d=now.getDate();
		m=now.getMonth();
		Y=now.getYear();
		if(Y<200)Y=1900+Y;
 
		pendule.innerHTML=H+':'+i+':'+s;
		if(fr){
			pendule2.innerHTML=day[now.getDay()]+' '+d+' '+month[m]+' '+Y;
		}else{
			m++;
			if(m<10)m='0'+m;
			pendule2.innerHTML=d+'/'+m+'/'+Y;
		}
		setTimeout(go,1000);
	}
	go();
};

Si tu appelles la fonction disp_horloge sans paramêtre, le format JJ/MM/AAAA sera utilisé.

Si tu appelles la fonction disp_horloge avec un paramêtre quelconque, le format en toutes lettres sera utilisé.

[hs]

Moi aussi j'étais orienté Turbo Assembler/Pascal et Delphi. Et grace à ce forum, j'ai appris aussi à aimer Javascript.

[/hs]

**NoSmoking** · 11/02/2014, 18h54

Bonjour,
une petite remarque en passant

Code :

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

1
2
Y=now.getYear();
if(Y<200)Y=1900+Y;

autant utiliser getFullYear()

**Eric2a** · 11/02/2014, 18h59

Ah oui

Bien vu noSmoking.

**cincap** · 11/02/2014, 22h29

Bonsoir à toutes et à tous,

Merci à tous pour ces infos précieuses.

@ Eric2A, merci pour ton aide et ton temps.

Que le script soit externe ou intégré à la page ne changera rien. Pas de souci de ce côté là.

Je t'avais demandé cela car j'avais placé le code JavaScript dans un fichier *.js et placé sur le site de ma fille et j'avais constaté que la page malgré l'appel de ce fichier restait avec l'heure fixée d'où ma question.

Je réessayerai demain.

@+,

Cincap

**cincap** · 12/02/2014, 09h45

Bonjour à toutes et à tous,

@ Eric2a, ton dernier code ne fonctionne pas, il s'agit certainement de la syntaxe soit les guillemets au lieu du ' ?

J'ai testé ton 1er code avec un fichier Js directement dans le répertoire du fichier html et ne fonctionne pas par contre si j'incorpore le code Jvs dans la page c'est ok.

Pourtant, je fais bien appel de ce fichier js dans la balise Head et le code est bien dans un fichier nommé js.

Code :

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

1
2
3
 
<script type="text/javascript" src="myfile.js">
</head>

Edit : en ce qui concerne le fichier js c'est ok, j'avais mis les balises + celles sur la page donc forcément bug.

Sinon le dernier code, ne fonctionne pas, d'autant que je dois l'adapter dans du Borland Pascal pour mon module.

@+,

Cincap

**cincap** · 13/02/2014, 11h29

Bonjour à toutes et à tous,

Mon topic était l'objet du pourquoi le 1er code communiqué ne fonctionnait pas indépendamment que cette technique était obsolète.

J'aurai aimé comprendre le défaut dans l'affichage de l'heure et de la date au format (12/02/2014).

A l'occasion, si quelqu'un veut bien m'informer en ce qui concerne ce 1er code, merci d'avance.

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
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
 
 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
 
  <meta charset="UTF-8">
  <title>VIDEO SURVEILLANCE</title>
 
 
  <style type="text/css">
#banderole {
background-color:black;
min-width:720px;
}
#banderole .heure {
color:rgb(0,0,255);
font-size:32px;
float:left;
margin-left: 10;
}
#banderole .date {
color:rgb(0,0,255);
font-size:32px;
float:right;
margin-right: 10;
}
#banderole .titre {
color:rgb(255,255,255);
text-align:center;
}
  </style>
  <script language="javascript">
<!-- Begin
function disp_horloge(){
if (!document.layers && !document.all) return;
var date_jour=new Date()
var heure=date_jour.getHours();
var min=date_jour.getMinutes();
var sec=date_jour.getSeconds();
if (heure<10) heure="0"+heure;
if (min<10) min="0"+min;
if (sec<10) sec="0"+sec;
function don_date_jour()
{var date_jour=new Date();
date_jour=don_date_format(date_jour);
return date_jour;}
function don_date_format(d1) {
var m=new Array(13);
m[1]="Janvier"; m[2]="Février"; m[3]="Mars"; m[4]="Avril"; m[5]="Mai"; m[6]="Juin";
m[7]="Juillet"; m[8]="Aout"; m[9]="Septembre"; m[10]="Octobre"; m[11]="Novembre"; m[12]="Décembre";
var d=new Array(8);
d[1]="Dimanche"; d[2]="Lundi"; d[3]="Mardi"; d[4]="Mercredi"; d[5]="Jeudi"; d[6]="Vendredi"; d[7]="Samedi";
var mois=m[d1.getMonth()+1];
var jour=d[d1.getDay()+1];
var date=d1.getDate();
var an=d1.getYear();
if (an<200) an=1900+an;
date=jour+" "+date+" "+mois+" "+an;
return date;
}
dispTime=heure+":"+min+":"+sec;
dispdato= don_date_jour()
if (document.layers) {
document.layers.pendule.document.write(dispTime);
document.layers.pendule.document.close();
document.layers.pendule2.document.write(dispdato);
document.layers.pendule2.document.close();
}
else
if (document.all)
pendule.innerHTML = dispTime;
pendule2.innerHTML = dispdato;
setTimeout("disp_horloge()",1000);
}
// End --> </script>
</head>
 
 
<body onload="disp_horloge()">
 
<div id="banderole">
<span id="pendule2" class="date">24/08/2013</span>
<span id="pendule" class="heure">12:34</span>
<h1 class="titre">VIDEO SURVEILLANCE</h1>
 
</div>
 
</body>
</html>

@+,

Cincap

**Kaamo** · 13/02/2014, 11h43

Par exemple. L'objet Date regorge de méthodes qui facilitent la vie

**cincap** · 13/02/2014, 12h43

@ Kaamo, merci de ta réponse, j'ai testé ton exemple et c'est super et simple.

J'aurai aimé afficher la date à droite et l'heure à gauche.

Mon test telquel est l'affichage à droite de l'heure et date et l'affichage à gauche est identique.

Y a t'il moyen avec cette fonction de n'afficher que la date et l'heure.

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
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta charset="UTF-8">
<title>VIDEO SURVEILLANCE</title> 
<style type="text/css">
#banderole {
background-color:black;
min-width:720px;
}
#banderole .heure {
color:rgb(0,0,255);
font-size:32px;
float:left;
margin-left: 10;
}
#banderole .date {
color:rgb(0,0,255);
font-size:32px;
float:right;
margin-right: 10;
}
#banderole .titre {
color:rgb(255,255,255);
text-align:center;
}
</style>
<script type="text/javascript"> 
function displayHorloge() {  
pendule2.innerHTML=(new Date).toLocaleString();
pendule.innerHTML=(new Date).toLocaleString();
  setTimeout(displayHorloge,1000);
}
</script>  
 
</head> 
<body onload="displayHorloge();"> 
<div id="banderole">
<span id="pendule2" class="Date">24/08/2013</span>
<span id="pendule" class="heure">12:34:10</span>
<h1 class="titre">VIDEO SURVEILLANCE</h1> 
</div> 
</body>
</html>

@+,

Cincap

**Kaamo** · 13/02/2014, 13h24

Bien sûr. L'objet Date a de nombreuses méthodes. Il suffit de prendre la bonne

En l'occurrence, voir le fiddle

**cincap** · 13/02/2014, 13h53

@ Kaamo, alors la c'est super, comme quoi c'est même simplifié à l'extème, je vais essayer d'assimiler ta suggestion et ton exemple bien entendu.

Grand merci à toi et aussi à ceux qui ont participé à la discussion.

@+,

Cincap

**SylvainPV** · 13/02/2014, 18h31

Petite modif pour gagner en précision et ne pas que l'horloge se désynchronise à la longue : http://jsfiddle.net/ku3Zc/4/

L'appel de la fonction displayHorloge prend quelques millisecondes, il faut en tenir compte dans le délai d'attente sinon à force d'additionner 1001 millisecondes, on se retrouve avec 1 minute 20 de décalage toutes les 24h. Puisqu'il s'agit de vidéosurveillance, je suppose que la page va rester ouverte longtemps donc ça vaut le coup d'être précis.

edit: en fait je raconte des conneries, vu qu'on recrée un objet Date dans la fonction on a toujours le bon temps. Par contre ma modif permet d'être plus précis sur le moment où une seconde bascule à une autre.

**cincap** · 13/02/2014, 20h00

Bonsoir à toutes et à tous,

@ SylvainPV, merci pour cette amélioration qui comme tu l'affirmes, peut avoir son importance, mais j'ai prévu un refresh réglable de la page qui est créée dynamiquement depuis ma fiche Delphi.

Que des cracks sur ce forum.

@+,

Cincap

**Kaamo** · 14/02/2014, 09h22

Sylvain : t'as de la doc, de la lecture sur le décalage que tu évoques ?

**danielhagnoul** · 14/02/2014, 10h17

Envoyé par SylvainPV

pour gagner en précision et ne pas que l'horloge se désynchronise à la longue

Code :

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

1
2
3
4
5
6
7
8
function update(){
    requestAnimationFrame( update );
 
    document.querySelector( "#displayDate" ).innerHTML = ( new Date ).toLocaleDateString();
    document.querySelector( "#displayHeure" ).innerHTML = ( new Date ).toLocaleTimeString();
}
 
update();

**Bovino** · 14/02/2014, 10h30

Daniel, ta solution peut paraitre intéressante, mais elle me semble un peu "violente" pour le cas actuel...
À ma connaissance, requestAnimationFrame c'est du 60 fps... soit 60 fois plus que nécessaire ! Et je ne parle pas des problèmes de compatibilité...
Donc selon moi, la solution de SylvainPV me semble la plus adaptée...

Date et heure en temps réel sur une bande noire !

JavaScript

Discussions similaires

Partager

Partager