Comment utiliser moment.JS pour un certain fuseau horaire et l'afficher en temps réel

Comment puis-je utiliser la bibliothèque Moment.JS pour un fuseau horaire international et l'afficher en temps réel?

C'est ce que j'ai jusqu'ici dans ma page d'index.

Code:

<!DOCTYPE html> <html> <head> <script src="moment.js"></script> <script src="moment-timezone.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> <script> moment().tz("America/Los_Angeles").format(); document.getElementById("time").firstChild.data = moment().format('hh:mm:ss a') </script> </head> <body> <span id="time">s</span> </body> </html> 

C'est ma première fois en utilisant MomentJS et je ne sais pas si je l'ai bien implémenté et pour l'afficher en temps réel sans actualiser la page en permanence.

Vous manquez les données de la zone réelle. Accédez au constructeur de données moment-timezone et incluez les zones qui vous intéressent. Mettez cela dans un autre fichier appelé moment-timezone-data.js et incluez-le, ou placez-le en ligne dans votre script existant. Voir ces documents .

Pour le mettre à jour en temps réel, vous devez mettre à jour l'élément sur un intervalle régulier.

De plus, dans votre exemple de code, la première fois que vous appelez le moment avec le fuseau horaire, vous lisez la réponse. Le deuxième appel, vous n'utilisez pas le fuseau horaire. Et vous n'avez pas besoin de jQuery ici.

Mettre tous ensemble:

 function showTheTime() { var s = moment().tz("America/Los_Angeles").format('hh:mm:ss a'); document.getElementById("time").innerHTML = s; } showTheTime(); // for the first load setInterval(showTheTime, 250); // update it periodically 

Vous pourriez penser que le réglage de l'intervalle à 1000 ms serait correct, mais vous pouvez constater qu'il ne visualise pas correctement en douceur. Cela se produit car la minuterie d'intervalle peut ne pas s'aligner sur l'horloge réelle. Il est préférable de mettre à jour plusieurs fois par seconde.