Discussion :

[Adakhum]

Bonjour,

je suis navré par avance de la naïveté de ma question.
Peut-on mettre plusieurs horloges faites en JS sur une même page ?

Je me doute de la réponse mais si je me la pose c'est à cause d'un étrange comportement de mon site...

Lorsque je met ce code dans un gadget html/JS (qui fonctionne !) :

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
<script type="text/javascript">
 
function Jour(){this[0] = "Dimanche";this[1] = "Lundi";this[2] = "Mardi";this[3] = "Mercredi";this[4] = "Jeudi";this[5] = "Vendredi";this[6] = "Samedi";}
 
function Mois(){this[0] = "janvier";this[1] = "février";this[2] = "mars";this[3] = "avril";this[4] = "mai";this[5] = "juin";this[6] = "juillet"; this[7] = "août";this[8] = "septembre"; this[9] = "octobre";this[10] = "novembre"; this[11] = "décembre";}
 
function date(){var jour=new Jour();var mois=new Mois();
 
var myDate=new Date();
annee = myDate.getFullYear();
var result=jour[myDate.getDay()]+" "+myDate.getDate()+" "+mois[myDate.getMonth()]+" "+annee+" -&nbsp;";
 
document.writeln(result);}
 
</script>
 
<div style="color:#135d7c; text-align:center; font-size: 13pt; font-weight:bold">
 
<script language="JavaScript" type="text/JavaScript">
date();
</script></div>
 
<div id="aff_heure2" style="color:#135d7c; text-align:center; font-size: 13pt; font-weight:bold">
 
<script type="text/javascript">
 
function test_heure2(){var mydate = new Date();
 
var heure = mydate.getHours();
var minute = mydate.getMinutes();
 
if (heure <= 9) heure = "0" + heure;
if (minute <= 9) minute = "0" + minute;
 
document.getElementById("aff_heure2").innerHTML = heure+":"+minute;}
 
function aff_heure2(){intervalId = setInterval(test_heure2, 1000);}
 
aff_heure2()
 
</script></div>

et que je rajoute celui-ci dans un autre gadget (qui fonctionne!) :

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
<div id="aff_heure" style="color:#135d7c; text-align:center; font-size: 13pt; font-weight:bold">
 
<script type='text/javascript'>
 
function test_heure(){var mydate = new Date();
 
var year = mydate.getFullYear();
var day = mydate.getDay();
var daym = mydate.getDate();
var mois = mydate.getMonth(); 
mois=mois+1;
 
var heures = mydate.getHours();
var minutes = mydate.getMinutes();
 
if (heures <= 9) heures = "0" + heures;
 
if (minutes <= 9) minutes = "0" + minutes;
 
document.getElementById("aff_heure").innerHTML =" " France "+daym+"."+mois+"."+year+" - "+heures+":"+minutes;}
 
function aff_heure(){intervalId = setInterval(test_heure, 1000);}
 
aff_heure()
 
</script></div>

... Là, ça ne fonctionne plus. Les deux marchent séparément, mais pas en même temps. Pourquoi ? Et comment résoudre le problème ?

Je me dit qu'il ne gère peut être pas plusieurs appel de "new Date();" mais pourtant j'ai un 3ème compteur qui lui marche très bien avec un des deux autres ?
Bref, j'y comprend rien et je suis très nul en JS (ce n'est pas moi qui est fait ces lignes), j'aurais besoin d'un petit coup de main ... Au cas où, mon site : http://lenormanditinerant.blogspot.fr/

D'avance merci.


EDIT: Et je viens de m'apercevoir que si je met deux fois le 1er code dans 2 gadgets différents, les dates s'affiche (dimanche 22 novembre) mais pas l'heure. :o ?

[NoSmoking]

Bonjour,
ton questionnement est proche de celui de cette discussion : Affichage depuis heure système différents horaires en fonction des décalages.

[Adakhum]

C'est gentil je n'avaispas vu ce topic.

Néanmoisn ce n'est pas tant le code en lui même qui merde, mais plutôt une sorte de bug qui fait que quand je met un code (pour avoir l'heure ou la date ou les deux) dans un gadget et le même ou presque dans un autre gadget, l'un des deux ne s'affiche pas ...

Alors en utilisant des codes complètement différents (surtout avec des variables différentes) ça marche, mais du coup je n'ai pas le même format et je n'arrive pas à afficher la même chose parce que je suis nul en JS ..


La question surtout c'est pourquoi ça bug ..?

Deux gadgets différents, le même code, sur un même footer, avec des variables différentes ça bug ? et avec les mêmes variables ?

[melka one]

jour

si c'est pour affiché plusieurs fois l'heure le mieux c'est de cree une fonction constructeur et d'instancié des objets

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
 
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script>
 
 
function test_heure(decalage,pays,conteneur){
 
this.pays=pays;
 
this.el=document.getElementById(conteneur);
this.plus=decalage;
this.ftc();
}
 
test_heure.prototype.ftc=function(){
 
var mydate = new Date();
 
var year = mydate.getFullYear();
var day = mydate.getDay();
var daym = mydate.getDate();
var mois = mydate.getMonth(); 
 
var heures = mydate.getHours()+this.plus;
var minutes = mydate.getMinutes();
 
heures = heures <= 9 ? "0" + heures :heures;
 
minutes =minutes <= 9 ? "0" + minutes :minutes;
 
this.el.innerHTML =this.pays+" "+daym+"."+mois+"."+year+" - "+heures+":"+minutes;
 
var that = this;
 
setTimeout(function(){that.ftc()},1000)
}
 
 
 window.addEventListener('load',function(){
 
new test_heure(0,"france","aff_heure1");
new test_heure(1,"engleterre","aff_heure2");
new test_heure(2,"groland","aff_heure3")
 
}, false)
 
 
</script>
 
</head>
<body>
<div id="aff_heure1" style="color:#135d7c; text-align:center; font-size: 13pt; font-weight:bold"></div>
<div id="aff_heure2" style="color:#135d7c; text-align:center; font-size: 13pt; font-weight:bold"></div>
<div id="aff_heure3" style="color:#135d7c; text-align:center; font-size: 13pt; font-weight:bold"></div>
 
 
</body>
</html>

[NoSmoking]

Regarde les erreurs que tu peux avoir dans la console ou en utilise la coloration syntaxique qui indique que sur cette ligne

Code :

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

document.getElementById("aff_heure").innerHTML =" " France "+daym+"."+mois+"."+year+" - "+heures+":"+minutes;}

il manque à minima un + ou il y a un " de trop

[Adakhum]

Tout d'abord merci beaucoup pour vos réponses ! Je me suis penché dessus jusqu'à 1h du mat' hier et j'ai enfin trouvé ... bon je ne sais pas pourquoi ça ne marchait pas, mais maintenant ça marche ^^

Je propose donc ici deux belles horloges ! Une française et une thaïlandaise (le résultat ici en bas de page)

Hormis que pour le décalage horaire de la thaïlandaise, il se peut qu'elle affiche à un moment "31 novembre" ou encore "32 décembre" mais ça disparait si tôt qu'on est passé minuit ^^


Alors d'un côté j'ai mit ce code pour l'horloge française :

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
<div id="HorlogeFr" style="height: 70px; padding-top: 20px;">
 
<div style="color:#135d7c; text-align:center; font-size: 14pt; font-weight:bold;">France &nbsp; &nbsp;<img border="0" height=13 width=20 src="http://2.bp.blogspot.com/-Q2SLiZOgI2Y/VlJMOPbmzOI/AAAAAAAAAUU/x8ezw_IrfUM/s200/Flag_of_France.png" /></div> 
 
<script type="text/javascript">
 
function Jour(){this[0] = "Dim";this[1] = "Lun";this[2] = "Mar";this[3] = "Mer";this[4] = "Jeu";this[5] = "Ven";this[6] = "Sam";}
 
function Mois(){this[0] = "Janv";this[1] = "Fév";this[2] = "Mars";this[3] = "Avr";this[4] = "Mai";this[5] = "Juin";this[6] = "Jui"; this[7] = "Août";this[8] = "Sept"; this[9] = "Oct";this[10] = "Nov"; this[11] = "Déc";}
 
function date(){
var jour=new Jour();
var mois=new Mois();
 
var myDate=new Date();
annee = myDate.getFullYear();
var result=" " + jour[myDate.getDay()]+" "+myDate.getDate()+" "+mois[myDate.getMonth()]+" "+annee+" &nbsp;";
 
document.writeln(result);}
 
</script>
 
<div style="color:#135d7c; text-align:center; font-size: 13pt; font-weight:bold">
<script language="JavaScript" type="text/JavaScript">
date();
</script></div>
 
 
 
<div id="Display_Hour" style="color:#135d7c; text-align:center; font-size: 13pt; font-weight:bold">
<script type='text/javascript'>
 
function Gadget_Hour(){var mydate = new Date();
 
var year = mydate.getFullYear();
var day = mydate.getDay();
var daym = mydate.getDate();
var month= mydate.getMonth(); 
month = month+1;
 
var hour = mydate.getHours();
var minute = mydate.getMinutes();
 
if (hour<= 9) hour= "0" + hour;
 
if (minute <= 9) minute = "0" + minute;
 
document.getElementById("Display_Hour").innerHTML =" "+hour+":"+minute;}
 
function Display_Hour(){intervalId = setInterval(Gadget_Hour, 1000);}
 
Display_Hour()
 
</script></div></div>

et dans l'autre gadget j'ai mit ce code pour l'horloge thaïlandaise :

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
<div id="HorlogeEtr" style="height: 70px; padding-top: 20px;">
 
<div style="color:#135d7c; text-align:center; font-size: 14pt; font-weight:bold;">Thaïlande &nbsp; &nbsp;<img border="0" height=13 width=20 src="http://3.bp.blogspot.com/-f-E126tjVM0/VlJIX_UYzMI/AAAAAAAAAUM/y9FT7d8xyO0/s200/Flag_of_Thailand.svg.png" /></div> 
 
 
<script type="text/javascript">
 
function Jour(){this[0] = "Dim";this[1] = "Lun";this[2] = "Mar";this[3] = "Mer";this[4] = "Jeu";this[5] = "Ven";this[6] = "Sam";this[7] = "Dim";}
 
function Mois(){this[0] = "Janv";this[1] = "Fév";this[2] = "Mars";this[3] = "Avr";this[4] = "Mai";this[5] = "Juin";this[6] = "Jui"; this[7] = "Août";this[8] = "Sept"; this[9] = "Oct";this[10] = "Nov"; this[11] = "Déc";}
 
function date(){
var jour=new Jour();
var mois=new Mois();
 
var myDate=new Date();
 
annee = myDate.getFullYear();
numerodate = myDate.getDate();
jourJ = jour[myDate.getDay()];
 
var heureNow = myDate.getHours()+6;
if (heureNow >= 24) {
numerodate = (myDate.getDate() + 1);
jourJ = jour[myDate.getDay()+1];
}
 
var result=" " +jourJ+" "+numerodate+" "+mois[myDate.getMonth()]+" "+annee+" &nbsp;";
 
document.writeln(result);}
 
</script>
 
<div style="color:#135d7c; text-align:center; font-size: 13pt; font-weight:bold">
<script language="JavaScript" type="text/JavaScript">
date();
</script></div>
 
<div id="aff_heure2" style="color:#135d7c; text-align:center; font-size: 13pt; font-weight:bold">
 
<script type="text/javascript">
 
function test_heure2(){var mydate = new Date();
 
var heure = mydate.getHours()+6;
var minute = mydate.getMinutes();
 
if (heure <= 9) heure = "0" + heure;
if (minute <= 9) minute = "0" + minute;
if (heure >= 24) heure = "0" + (heure - 24);
 
document.getElementById("aff_heure2").innerHTML = heure+":"+minute;}
 
function aff_heure2(){intervalId = setInterval(test_heure2, 1000);}
 
aff_heure2()
 
</script></div></div>

J'en suis plutôt fier, ça a de la gueule pour quelqu'un qui y connait rien et qui fait tout avec le hasard comme moi ^^

Encore merci ! tchuss

[NoSmoking]

J'en suis plutôt fier, ça a de la gueule pour quelqu'un qui y connait rien et qui fait tout avec le hasard comme moi ^^

Tu as le droit d'être fier mais ce que personnellement je trouve dommage c'est que l'on t'a fournis des pistes sérieuses et que tu n'a même pas daigner en tenir compte.
L'exemple, issu du lien vers une autre discussion, est EXACTEMENT ce que tu cherchais, les bugs en moins, mais quoiqu'il arrive, il me tarde le 32 décembre pour fêter cela. même si cela doit être furtif !

[Adakhum]

Sache pour te rassuré que les codes m'ont servit indirectement car je m'en suis inspiré ! Je les ai tous lu.
Sache aussi que je suis une vrai tanche en html/css/JS donc ... j'ai fait comme il me semblait être le plus simple. Je n'avais pas les connaissances pour faire un tout autre schéma de prog, sachant que j'étais déjà tout près du but ! ça m'aurai frustré de ne pas aller au bout aussi près.

Hâte d'être le 32 décembre Encore merci !