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

Version imprimable

Voir 40 message(s) de cette discussion en une page

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:

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

Un effort sur l'indentation SVP :calim2:
Code:

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é.

Salut,

Je jette le code optimisé.

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
<!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.

10/02/2014, 22h00
cincap

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
11/02/2014, 05h57
cincap

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

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:

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]

11/02/2014, 18h54
NoSmoking
Bonjour,
une petite remarque en passant
Code:

1 2 Y=now.getYear(); if(Y<200)Y=1900+Y;
autant utiliser getFullYear()
11/02/2014, 18h59
Eric2a

Ah oui :oops: Bien vu noSmoking.
11/02/2014, 22h29
cincap

Bonsoir à toutes et à tous,

Merci à tous pour ces infos précieuses.

@ Eric2A, merci pour ton aide et ton temps.:lol:

Citation:

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
12/02/2014, 09h45
cincap
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:

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

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:

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

13/02/2014, 11h43
Kaamo

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

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

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

13/02/2014, 13h24
Kaamo

Bien sûr. L'objet Date a de nombreuses méthodes. Il suffit de prendre la bonne :)
En l'occurrence, voir le fiddle
13/02/2014, 13h53
cincap

@ 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
13/02/2014, 18h31
SylvainPV

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.
13/02/2014, 20h00
cincap

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
14/02/2014, 09h22
Kaamo

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

Citation:

Envoyé par SylvainPV

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

Code:

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();

14/02/2014, 10h30
Bovino

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...

Voir 40 message(s) de cette discussion en une page