Comment obtenir l'heure locale exacte du client?
Quelle est la meilleure méthode pour obtenir l'heure locale des clients indépendamment du fuseau horaire du système client? Je crée une application et je dois tout d’abord obtenir l’heure et la date exactes de l’endroit où le client accède. Même détecter l'adresse IP du système client a un inconvénient ou détecter le fuseau horaire du système client peut parfois être risqué. Alors, y a-t-il une issue qui pourrait être vraiment fiable et non vulnérable aux erreurs, car afficher une heure et une date erronées au client est quelque chose de très embarrassant.
En JavaScript? Il suffit d'instancier un nouveau objet Date
var now = new Date();
Cela créera un nouvel objet Date avec l'heure locale du client.
De nos jours, vous pouvez obtenir le fuseau horaire correct d’un utilisateur ne disposant que d’une seule ligne de code:
const timezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
Vous pouvez ensuite utiliser moment-timezone pour analyser le fuseau horaire de la manière suivante:
const currentTime = moment().tz(timezone).format();
Si vous voulez connaître le fuseau horaire du client par rapport à GMT/UTC, vous allez ici:
var d = new Date();
var tz = d.toString().split("GMT")[1].split(" (")[0]; // timezone, i.e. -0700
Si vous souhaitez connaître le nom actuel du fuseau horaire, vous pouvez essayer ceci:
var d = new Date();
var tz = d.toString().split("GMT")[1]; // timezone, i.e. -0700 (Pacific Daylight Time)
MISE À JOUR 1
Selon le premier commentaire, vous pouvez également utiliser d.getTimezoneOffset() pour obtenir le décalage en minutes à partir de UTC. Quelques prises avec cela cependant.
- Le signe (+/-) des minutes renvoyées est probablement le contraire de ce à quoi vous vous attendiez. Si vous avez 8 heures de retard sur UTC, la valeur retournée sera
480Et non-480. Voir MDN ou MSDN pour plus de documentation. - Il ne renvoie pas le fuseau horaire indiqué par le client comme dans le deuxième exemple que j'ai donné. Seules les minutes sont décalées par rapport à UTC actuellement. Donc, cela changera en fonction de l'heure avancée.
MISE À JOUR 2
Bien que les exemples de fractionnement de chaîne fonctionnent, ils peuvent être difficiles à lire. Voici une version de regex qui devrait être plus facile à comprendre et qui est probablement plus rapide (les deux méthodes sont très rapides).
Si vous voulez connaître le fuseau horaire du client par rapport à GMT/UTC, vous allez ici:
var gmtRe = /GMT([\-\+]?\d{4})/; // Look for GMT, + or - (optionally), and 4 characters of digits (\d)
var d = new Date().toString();
var tz = gmtRe.exec(d)[1]; // timezone, i.e. -0700
Si vous souhaitez connaître le nom du fuseau horaire, essayez ceci:
var tzRe = /\(([\w\s]+)\)/; // Look for "(", any words (\w) or spaces (\s), and ")"
var d = new Date().toString();
var tz = tzRe.exec(d)[1]; // timezone, i.e. "Pacific Daylight Time"
Il fallait juste que j'aborde cette question, alors j'ai pensé laisser ma réponse. jQuery non requis J'utilisais pour mettre à jour l'élément car j'avais déjà l'objet mis en cache.
J'ai d'abord écrit une fonction php pour renvoyer les dates/heures requises à mon modèle HTML
/**
* Gets the current location time based on timezone
* @return string
*/
function get_the_local_time($timezone) {
//$timezone ='Europe/London';
$date = new DateTime('now', new DateTimeZone($timezone));
return array(
'local-machine-time' => $date->format('Y-m-d\TH:i:s+0000'),
'local-time' => $date->format('h:i a')
);
}
Ceci est ensuite utilisé dans mon modèle HTML pour afficher une heure initiale et restituer le format de date requis par javascript dans un attribut de données.
<span class="box--location__time" data-time="<?php echo $time['local-machine-time']; ?>">
<?php echo $time['local-time']; ?>
</span>
J'ai ensuite utilisé les commandes getUTCHours sur mon objet de date pour renvoyer l'heure quel que soit le fuseau horaire de l'utilisateur.
La méthode getUTCHours () renvoie l'heure (de 0 à 23) de la date et de l'heure spécifiées, conformément à l'heure universelle.
var initClocks = function() {
var $clocks = $('.box--location__time');
function formatTime(hours, minutes) {
if (hours === 0) {
hours = 12;
}
if (hours < 10) {
hours = "0" + hours;
}
if (minutes < 10) {
minutes = "0" + minutes;
}
return {
hours: hours,
minutes: minutes
}
}
function displayTime(time, $clockDiv) {
var currentTime = new Date(time);
var hours = currentTime.getUTCHours();
var minutes = currentTime.getUTCMinutes();
var seconds = currentTime.getUTCSeconds();
var initSeconds = seconds;
var displayTime = formatTime(hours, minutes);
$clockDiv.html(displayTime.hours + ":" + displayTime.minutes + ":" + seconds);
setInterval(function() {
if (initSeconds > 60) {
initSeconds = 1;
} else {
initSeconds++;
}
currentTime.setSeconds(initSeconds);
hours = currentTime.getUTCHours();
minutes = currentTime.getUTCMinutes();
seconds = currentTime.getUTCSeconds();
displayTime = formatTime(hours, minutes);
$clockDiv.html(displayTime.hours + ":" + displayTime.minutes + ":" + seconds);
}, 1000);
}
$clocks.each(function() {
displayTime($(this).data('time'), $(this));
});
};
J'utilise ensuite la méthode setSeconds pour mettre à jour l'objet date en fonction du nombre de secondes écoulées depuis le chargement de la page (fonction d'intervalle simple) et met à jour le code HTML.
Le moyen le plus fiable que j'ai trouvé pour afficher l'heure locale d'une ville ou d'un lieu consiste à puiser dans une API de fuseau horaire telle que API de fuseau horaire Google . Elle renvoie le fuseau horaire correct et, ce qui est plus important encore, le décalage de l'heure avancée de n'importe quel emplacement, ce qui ne peut se faire qu'en utilisant l'objet Date () de JavaScript. Il existe un bon tutoriel sur l’utilisation de l’API pour obtenir et afficher l’heure locale ici :
var loc = '35.731252, 139.730291' // Tokyo expressed as lat,lng Tuple
var targetDate = new Date() // Current date/time of user computer
var timestamp = targetDate.getTime()/1000 + targetDate.getTimezoneOffset() * 60 // Current UTC date/time expressed as seconds since midnight, January 1, 1970 UTC
var apikey = 'YOUR_TIMEZONE_API_KEY_HERE'
var apicall = 'https://maps.googleapis.com/maps/api/timezone/json?location=' + loc + '×tamp=' + timestamp + '&key=' + apikey
var xhr = new XMLHttpRequest() // create new XMLHttpRequest2 object
xhr.open('GET', apicall) // open GET request
xhr.onload = function(){
if (xhr.status === 200){ // if Ajax request successful
var output = JSON.parse(xhr.responseText) // convert returned JSON string to JSON object
console.log(output.status) // log API return status for debugging purposes
if (output.status == 'OK'){ // if API reports everything was returned successfully
var offsets = output.dstOffset * 1000 + output.rawOffset * 1000 // get DST and time zone offsets in milliseconds
var localdate = new Date(timestamp * 1000 + offsets) // Date object containing current time of Tokyo (timestamp + dstOffset + rawOffset)
console.log(localdate.toLocaleString()) // Display current Tokyo date and time
}
}
else{
alert('Request failed. Returned status of ' + xhr.status)
}
}
xhr.send() // send request
De: Affichage de l'heure locale d'une ville à l'aide de JavaScript et de l'API de fuseau horaire Google
mon code est
<html>
<head>
<title>Title</title>
<script type="text/javascript">
function display_c(){
var refresh=1000; // Refresh rate in milli seconds
mytime=setTimeout('display_ct()',refresh)
}
function display_ct() {
var strcount
var x = new Date()
document.getElementById('ct').innerHTML = x;
tt=display_c();
}
</script>
</head>
<body onload=display_ct();>
<span id='ct' ></span>
</body>
</html>
si vous voulez plus de codes visitez mon blog http://mysimplejavascriptcode.blogspot.in/