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]

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

JavaScript

Vue hybride

Discussions similaires

Partager

Partager