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