Javascript Girl
  1. Javascript Girl
  3. Comment obtenir l'heure locale exacte du client?
Intereting Posts
Quand IE7 recalcule-t-il les styles? Ne fonctionne pas de manière fiable lorsqu'une classe est ajoutée au corps Comment définir une image de curseur via jQuery? Quelles sont les alternatives à ExtJS? Quel est le '@' (au symbole) dans le décorateur Redux @connect? Comment l'égalité des chaînes fonctionne-t-elle en JavaScript? Comment exécuter UglifyJS2 sans Node.JS Analysez et manipulez les DOM qui sont venus comme entrée de chaîne Comment configurer les largeurs des colonnes de la grille Kendo UI par programme CSS / Javascript pour forcer la ligne de la table html sur une seule ligne Quelle est la manière correcte de créer une classe de Javascript? Utiliser la variable pour le nom de la propriété dans JavaScript literal? Définir la propriété de style de l'élément HTML en javascript Uncaught TypeError: La propriété '$' de l'objet n'est pas une fonction Le redimensionnement d'un en-tête de colonne slickgrid provoque une désalignement du corps Filtrage de javascript à partir du contenu du site PHP

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 des clients? Je crée une application et je dois tout d'abord obtenir l'heure et la date exacte de l'endroit d'où le client accède. Même la détection de l'adresse IP du système client présente un inconvénient ou la détection du fuseau horaire du système client peut être risquée parfois. Alors, y at-il une solution qui pourrait être vraiment fiable et ne pas être vulnérable à l'erreur car l'affichage de l'heure et de la date incorrect pour le client est quelque chose d'embarrassant.

En JavaScript? Instancez simplement un nouvel objet Date 

var now = new Date();

Cela créera un nouvel objet Date avec l'heure locale du client.

Si vous souhaitez connaître le fuseau horaire du client par rapport à GMT / UTC, vous allez: 

 var d = new Date(); var tz = d.toString().split("GMT")[1].split(" (")[0]; // timezone, ie -0700

Si vous désirez le nom réel du fuseau horaire, vous pouvez essayer ceci: 

 var d = new Date(); var tz = d.toString().split("GMT")[1]; // timezone, ie -0700 (Pacific Daylight Time)

MISE À JOUR 1

Par le premier commentaire, vous pouvez également utiliser d.getTimezoneOffset() pour obtenir le décalage en quelques minutes de l'UTC. Un couple d'achoppes avec elle cependant.

  1. Le signe (+/-) des minutes retournées est probablement le contraire de ce que vous attendez. Si vous êtes 8 heures après UTC, il renverra 480 pas -480 . Voir MDN ou MSDN pour plus de documentation.
  2. Il ne retourne pas réellement le fuseau horaire dans lequel le client signale qu'il est dans le deuxième exemple que j'ai donné. Juste les minutes décalées par UTC actuellement. Cela changera en fonction de l'heure d'été.

MISE À JOUR 2

Bien que les exemples de fractionnement de la chaîne fonctionnent, ils peuvent être confus à lire. Voici une version regex qui devrait être plus facile à comprendre et probablement plus rapide (les deux méthodes sont très rapides cependant).

Si vous souhaitez connaître le fuseau horaire du client par rapport à GMT / UTC, vous allez: 

 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, ie -0700

Si vous souhaitez le nom réel du fuseau horaire, procédez comme suit: 

 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, ie "Pacific Daylight Time"

De nos jours, vous pouvez obtenir un fuseau horaire correct d'un utilisateur ayant une seule ligne de code: 

 const timezone = Intl.DateTimeFormat().resolvedOptions().timeZone;

Source: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/DateTimeFormat/resolvedOptions

Vous pouvez alors utiliser le moment-timezone pour analyser le fuseau horaire comme: 

 const currentTime = moment().tz(timezone).format();

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/

Essayez de cette façon 

  function timenow(){ var now= new Date(), ampm= 'am', h= now.getHours(), m= now.getMinutes(), s= now.getSeconds(); if(h>= 12){ if(h>12) h -= 12; ampm= 'pm'; } if(m<10) m= '0'+m; if(s<10) s= '0'+s; return now.toLocaleDateString()+ ' ' + h + ':' + m + ':' + s + ' ' + ampm; } toLocaleDateString()

Est une fonction pour modifier le format de l'heure de la date comme toLocaleDateString("en-us")

Il fallait s'attaquer à cela, alors je pensais que je laisserais ma réponse. JQuery n'est pas nécessaire J'ai utilisé 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 retourner 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('Ymd\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 rendre 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 getUTCHours sur mon objet de date pour retourner l'heure indépendamment du fuseau horaire des utilisateurs

La méthode getUTCHours () renvoie l'heure (de 0 à 23) de la date et de l'heure spécifiées, selon 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 de la quantité de secondes passée depuis la charge de la page (fonction d'intervalle simple) et mettre à jour le HTML

La manière la plus fiable que j'ai trouvée pour afficher l'heure locale d'une ville ou d'un emplacement est de faire appel à une API de fuseau horaire telle que Google Time Zone API . Il renvoie le fuseau horaire correct, et plus important encore, le décalage de l'heure d'économie de jour de n'importe quel emplacement, qui utilise simplement l'objet Date () de JavaScript ne peut pas être fait autant que je le sais. 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 + '&timestamp=' + 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

À partir de: Affichage de l'heure locale de n'importe quelle ville en utilisant JavaScript et Google Time Zone API