Affichage depuis heure système différents horaires en fonction des décalages

**Regales2015** · 11/11/2015, 13h30

Bonjour,

je suis débutant en programmation et je souhaite afficher sur une même page HTML l'heure de mon système(UTC + 1), ainsi que l'heure à la Martinique (UTC- 4); l'heure à Nouméa (UTC + 11); ...

Quelqu'un peut il m'aider à résoudre ce problème?

Merci pour votre aide.

Ci-dessous la page que je suis en train de créer.

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
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
91
92
93
94
95
96
97
98
99
100
101
102
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script language="JavaScript">
//
<!--masque le script pour les navigateurs qui ne supportent pas JavaScript 
 
function afficheDate()// Notre fonction pour afficher la date et l'heure
	{
 
	jour = new Array ("Dimanche","Lundi","Mardi","Mercredi","Jeudi","Vendredi","Samedi");
	mois = new Array (" Janvier"," Février"," Mars"," Avril"," Mai"," Juin"," Juillet"," Août»"," Septembre"," Octobre"," Novembre"," Décembre");
	date=new Date();
 
	datejour=date.getDate();
	heure=date.getHours();
	minute=date.getMinutes();
	seconde=date.getSeconds();
	if (date.getDate()<10) datejour="0"+datejour;
 
	if (heure<10) heure="0"+heure;
	if (minute<10) minute="0"+minute;
	if (seconde<10) seconde="0"+seconde;
	document.getElementById("texteDate").innerHTML=jour[date.getDay()]+" "+datejour+""+mois[date.getMonth()]+" 			"+heure+":"+minute+":"+seconde;
	setTimeout("afficheDate()", 1000);
 
		}
 // Fin du script -->
</script>
 
<title>Tableau de bord </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="Page du maître du temps" />
<meta name="keywords" content="site perso" />
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body onload="afficheDate();">
 
 <div id="global">
 <div id="bandeau">
<span class="titreSite">Tableau de Bord</span>
<br />
<span class="slogan">""</span>
</div>
 
<ul id="menu">
<li><a href="site3.html" title="Voir la page d'accueil">Accueil</a></li>
<li><a href="documentation.html" title="Voir la documentation">Documentations</a></li>
<li><a href="suivi.html" title="Voir les informations">Suivi</a></li>
<li><a href="contact.html" title="Voir les diff?rents contacts">Annuaires</a></li>
<li><a href="divers.html" title="Voir diff?rents outils">Divers</a></li>
<li><a href="Horloge.html" title="Fuseaux horaires">Horloges</a></li>
</ul>
<div id="contenu">
 
		<h1>Fuseaux horaires</h1>
			<img src="images/fuseaux-horaires-grande-carte.jpg" class="imageGauche" alt="Photo fuseaux" />
<li><a href="" style="font-size:18px">Papeete :</a></li>
 
<li><a href="" style="font-size:18px">Martinique :</a></li>
 
<li><a href="" style="font-size:18px">Saint-Pierre et Miquelon :</a></li>
 
<li><a href="" style="font-size:18px">Brest :</a></li> 
&nbsp;
<!--DEBUT DATE-->
<table>
   <tbody>
      <tr>           
         <td width="92%" ><span id ="texteDate" style="font-size:10pt;font-weight:bold;"></td>
       </tr>
     </tbody>
</table>
 <!--FIN DATE-->
 
<li><a href="" style="font-size:18px">RÃ©union :</a></li>
 
<li><a href="" style="font-size:18px">Noumea :</a></li>
 
</script>			
		<h2></h2>
		<p> 
 
		<br/><br/> 
 
		</p>
 
<div style="clear:both;"></div>
</div>
<hr><hr />
 
 
<div id="piedDePage">
 
</div>
 
</div>
</div>
 
 
</body>
</html>

**NoSmoking** · 14/11/2015, 18h31

Bonjour,
as tu essayé le basique ?

Code :

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

1
2
3
4
5
6
7
var heure = 1000 * 60 *60;
var dIci      = new Date(),
  dMartinique = new Date(),
  dNouméa     = new Date();
 
dMartinique.setTime(dIci.getTime() -(  4* heure));
dNouméa.setTime    (dIci.getTime() +( 11* heure));

**Regales2015** · 15/11/2015, 10h35

Bonjour, j'ai bien vu votre réponse mais comment je l'intègre dans mon code. J'ai fais plusieurs essais sans succès, et je ne peux donc pas confirmer qu'il fonctionne.

Merci pour votre aide.

**NoSmoking** · 16/11/2015, 20h46

Il eut était intéressant que tu nous mettes le code de tes essais.

Comme tu as plusieurs dates à afficher il te faudra passer par une boucle et il serait plus approprié d'avoir un objet data qui contient les différentes informations à traiter.

Par exemple

Code :

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

1
2
3
4
5
6
7
8
9
// Données d'affichage et de traitement
var data = [
  {'id' : 'papeete',      'utc' : -10 },  // -10 UTC
  {'id' : 'martinique',   'utc' :  -4 },  // -04 UTC
  {'id' : 'saint-pierre', 'utc' :  -3 },  // -03 UTC
  {'id' : 'brest',        'utc' :  +1 },  // +01 UTC
  {'id' : 'reunion',      'utc' :  +4 },  // +04 UTC
  {'id' : 'noumea',       'utc' : +11 }   // +11 UTC
];

il te faudra donc une structure HTML de ce type

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
  <ul>
    <li>
      Papeete
      <div id="papeete"></div>
    </li>
    <li>
      Martinique
      <div id="martinique"></div>
    </li>
    <li>
      Saint Pierre et Miquelon
      <div id="saint-pierre"></div>
    </li>
    <li>
      Brest
      <div id="brest"></div>
    </li>
    <li>
      Réunion
      <div id="reunion"></div>
    </li>
    <li>
      Nouméa
      <div id="noumea"></div>
    </li>
  </ul>

à chaque itération tu viendras remplir la DIV qui va bien.

Pour ce qui est de la fonction principale elle pourrait ressembler à cela en utilisant la méthode de l'objet Date toLocaleString qui est intéressante sur le navigateurs modernes de par la possibilité de choisir son format de sortie.

Au final cela donne

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
// constante
var HEURE = 1000 *60 *60;
// Données d'affichage et de traitement
var data = [
  {'id' : 'papeete',      'utc' : -10 },  // -10 UTC
  {'id' : 'martinique',   'utc' :  -4 },  // -04 UTC
  {'id' : 'saint-pierre', 'utc' :  -3 },  // -03 UTC
  {'id' : 'brest',        'utc' :  +1 },  // +01 UTC
  {'id' : 'reunion',      'utc' :  +4 },  // +04 UTC
  {'id' : 'noumea',       'utc' : +11 }   // +11 UTC
];
// format d'affichage pour les navigateurs récents ;)
// https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Date/toLocaleString
var optionsDate = {
//  hour12: false,
  weekday:  'long',
//  year:     'numeric',
  month:    'long',
  day:      'numeric',
  hour:     '2-digit',
  minute:   '2-digit',
  second:   '2-digit'
};
// Différence entre le fuseau horaire UTC, et celui de l'heure locale.
var offsetDate = new Date().getTimezoneOffset() / 60;
// Fonction d'affichage
function afficheHeure(){
  var i,
      nb = data.length,
      dTemp,
      date = new Date();
  // boucle sur les infos à afficher
  for( i=0; i < nb; i +=1){
    dTemp = new Date();
    dTemp.setTime( date.getTime() + ((data[i].utc +offsetDate) * HEURE));
    document.getElementById( data[i].id).innerHTML = dTemp.toLocaleString('fr-FR',optionsDate );
  }
}
// lance affichage toutes les prochaines secondes
setInterval( afficheHeure, 1000);
// affichage immédiat
afficheHeure();

et l'exemple complet

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
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
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Affichage Date avec Date.toLocaleString()</title>
<meta name="Author" content="NoSmoking">
<style>
html, body{
  margin:0;
  padding:0;
  font: 1em/1.5 Verdana, sans-serif;
}
#main {
  width:60em;
  margin:0 auto;
}
h1, h2, h3 {
  color:#069;
}
#contenu {
  font-size:1em;
}
#contenu ul {
  font-weight:bold;
}
#contenu div:first-letter {
  text-transform: uppercase;
  font-size:initial;
}
#contenu div {
  font-size:.9em;
  font-weight:normal;
  margin:0 0 .5em .5em;
  width:20em;
  text-align:right;
}
</style>
</head>
<body>
<div id="contenu">
   <h1>Fuseaux horaires</h1>
  <ul>
    <li>
      Papeete
      <div id="papeete"></div>
    </li>
    <li>
      Martinique
      <div id="martinique"></div>
    </li>
    <li>
      Saint Pierre et Miquelon
      <div id="saint-pierre"></div>
    </li>
    <li>
      Brest
      <div id="brest"></div>
    </li>
    <li>
      Réunion
      <div id="reunion"></div>
    </li>
    <li>
      Nouméa
      <div id="noumea"></div>
    </li>
  </ul>
</div>
</body>
 
<script>
// constante
var HEURE = 1000 *60 *60;
// Données d'affichage et de traitement
var data = [
  {'id' : 'papeete',      'utc' : -10 },  // -10 UTC
  {'id' : 'martinique',   'utc' :  -4 },  // -04 UTC
  {'id' : 'saint-pierre', 'utc' :  -3 },  // -03 UTC
  {'id' : 'brest',        'utc' :  +1 },  // +01 UTC
  {'id' : 'reunion',      'utc' :  +4 },  // +04 UTC
  {'id' : 'noumea',       'utc' : +11 }   // +11 UTC
];
// format d'affichage pour les navigateurs récents ;)
// https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Date/toLocaleString
var optionsDate = {
//  hour12: false,
  weekday:  'long',
//  year:     'numeric',
  month:    'long',
  day:      'numeric',
  hour:     '2-digit',
  minute:   '2-digit',
  second:   '2-digit'
};
// Différence entre le fuseau horaire UTC, et celui de l'heure locale.
var offsetDate = new Date().getTimezoneOffset() / 60;
// Fonction d'affichage
function afficheHeure(){
  var i,
      nb = data.length,
      dTemp,
      date = new Date();
  // boucle sur les infos à afficher
  for( i=0; i < nb; i +=1){
    dTemp = new Date();
    dTemp.setTime( date.getTime() + ((data[i].utc +offsetDate) * HEURE));
    document.getElementById( data[i].id).innerHTML = dTemp.toLocaleString('fr-FR',optionsDate );
  }
}
// lance affichage toutes les prochaines secondes
setInterval( afficheHeure, 1000);
// affichage immédiat
afficheHeure();
</script>
</html>

Tu as également la possibilité de faire cela en utilisant la librairie moment.js très complète.
Exemple en utilisant moment.js

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
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
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>[é..]</title>
<title>Affichage Date avec moment.format()</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.js"></script>
<style>
html, body{
  margin:0;
  padding:0;
  font: 1em/1.5 Verdana, sans-serif;
}
#main {
  width:60em;
  margin:0 auto;
}
h1, h2, h3 {
  color:#069;
}
#contenu {
  font-size:1em;
}
#contenu ul {
  font-weight:bold;
}
#contenu div:first-letter {
  text-transform: uppercase;
  font-size:initial;
}
#contenu div {
  font-size:.9em;
  font-weight:normal;
  margin:0 0 .5em .5em;
  width:20em;
  text-align:right;
}
</style>
</head>
<body>
<div id="contenu">
   <h1>Fuseaux horaires</h1>
  <ul>
    <li>
      Papeete
      <div id="papeete"></div>
    </li>
    <li>
      Martinique
      <div id="martinique"></div>
    </li>
    <li>
      Saint Pierre et Miquelon
      <div id="saint-pierre"></div>
    </li>
    <li>
      Brest
      <div id="brest"></div>
    </li>
    <li>
      Réunion
      <div id="reunion"></div>
    </li>
    <li>
      Nouméa
      <div id="noumea"></div>
    </li>
  </ul>
</div>
</body>
 
<script>
// redéfinition de données
// http://momentjs.com/docs/#/i18n/changing-locale/
moment.locale( "fr", {
  months:        'janvier février mars avril mai juin juillet août septembre octobre novembre décembre'.split(' '),
        monthsShort:   'janv. févr. mars avr. mai juin juil. août sept. oct. nov. déc.'.split(' '),
        weekdays:      'Dimanche Lundi Mardi Mercredi Jeudi Vendredi Samedi'.split(' '),
        weekdaysShort: 'dim. lun. mar. mer. jeu. ven. sam.'.split(' '),
        weekdaysMin:   'Di Lu Ma Me Je Ve Sa'.split(' ')
});
// http://momentjs.com/docs/#/displaying/format/
var dFormat = 'dddd Do MMMM YYYY HH:mm:ss';
 
// Données d'affichage et de traitement
var data = [
  {'id' : 'papeete',      'utc' : -10 },  // -10 UTC
  {'id' : 'martinique',   'utc' :  -4 },  // -04 UTC
  {'id' : 'saint-pierre', 'utc' :  -3 },  // -03 UTC
  {'id' : 'brest',        'utc' :  +1 },  // +01 UTC
  {'id' : 'reunion',      'utc' :  +4 },  // +04 UTC
  {'id' : 'noumea',       'utc' : +11 }   // +11 UTC
];
// Fonction d'affichage
function afficheHeure(){
  var i, nb = data.length,
      dTemp;
  for( i=0; i < nb; i +=1){
    dTemp = moment().utcOffset(data[i].utc);
    document.getElementById( data[i].id).innerHTML = dTemp.format(dFormat);
  }
}
// lance affichage toutes les prochaines secondes
setInterval( afficheHeure, 1000);
// affichage immédiat
afficheHeure();
 
</script>
</html>

Voilà en espérant avoir été le plus complet.

**danielhagnoul** · 16/11/2015, 23h33

Avec Moment.js

Code :

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

1
2
3
4
5
6
7
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.min.js"></script>
<script>
  console.log( "UTC : ", moment.utc().format() );
  console.log( "Local (UTC + 1) : ", moment.utc().add( 1, 'hours' ).format() );
  console.log( "Martinique (UTC - 4) : ", moment.utc().subtract( 4, 'hours' ).format() );
  console.log( "Nouméa (UTC + 11) : ", moment.utc().add( 11, 'hours' ).format() );
</script>

En utilisant la méthode clone() :

Code :

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

1
2
3
4
5
6
var utc = moment.utc();
 
console.log( "UTC : ", utc.format() );
console.log( "Local (UTC + 1) : ", utc.clone().add( 1, 'hours' ).format() );
console.log( "Martinique (UTC - 4) : ", utc.clone().subtract( 4, 'hours' ).format() );
console.log( "Nouméa (UTC + 11) : ", utc.clone().add( 11, 'hours' ).format() );

**Regales2015** · 17/11/2015, 21h13

Envoyé par NoSmoking

Il eut était intéressant que tu nous mettes le code de tes essais.
...

Bonsoir,

merci pour ces explications et ce cours magistral en live. La solution me convient tout à fait, c'est comme je l'espérais.

Il me reste encore beaucoup de chemin pour comprendre la syntaxe, mais ça viendra avec le temps.

Merci et bonne soirée.

**Regales2015** · 17/11/2015, 21h20

Envoyé par danielhagnoul

Avec Moment.js
...

Bonsoir,

merci pour cette autre méthode. Je testerais plus tard. Merci pour votre implication et vos réponses.

Bonne soirée.

Affichage depuis heure système différents horaires en fonction des décalages

JavaScript

Discussions similaires

Partager

Partager