如何在某个时区使用moment.JS并实时显示答案

【问题标题】：How to use moment.JS for a certain timezone and display it in real time如何在某个时区使用moment.JS并实时显示
【发布时间】：2013-09-13 19:08:51
【问题描述】：

如何将 Moment.JS 库用于国际时区并实时显示？

这是我目前在我的索引页面中的内容。

代码：

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

这是我第一次使用MomentJS，不知道我是否正确实现了它，并在不经常刷新页面的情况下实时显示它。

【问题讨论】：

标签： javascript timer momentjs

【解决方案1】：

您缺少实际的区域数据。转到the moment-timezone data builder 并包括您关心的区域。将其放入另一个名为 moment-timezone-data.js 的文件中并包含它，或者将其放入现有脚本中。见these docs。

要实时更新它，您需要定期更新元素。

另外，在您的示例代码中，当您第一次使用时区调用 moment 时，您会丢弃响应。第二个电话，您没有使用时区。而且这里不需要 jQuery。

把它们放在一起：

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

您可能认为将间隔设置为 1000 毫秒就可以了，但您可能会发现它在视觉上并不流畅。发生这种情况是因为间隔计时器可能与实际时钟不一致。最好每秒更新多次。

【讨论】：

我完成了你让我做的所有步骤，但它似乎不起作用。在我的 span 元素中，我是否需要从脚本中调用任何特定方法？目前，这就是我所拥有的。测试。正确地说，它应该只用时区覆盖“测试”，对吗？
是的，它会用渲染的时间字符串覆盖其中的任何内容。您可能需要在定义跨度之后调用此代码，或者如果您使用 jQuery，则可能需要从 ready 函数之类的东西中调用。
它有效，非常感谢。为什么在某些情况下，某些 javascripts 直到在 body 标记内的某些元素之后才能工作？
JavaScript 在遇到时按顺序执行。如果您尝试在加载之前访问一个元素，那么它将找不到它。如果你依赖onLoad 事件，或者jQuery 的ready 事件，或者类似的东西，你可以提前放东西。但是如果你只是内联运行它，它必须在元素定义之后。
我明白了。再次感谢您的提示和解决方案。