8

如何将 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，我不知道我是否正确实现它并实时显示它而无需不断刷新页面。

4

1 回答 1

7

您缺少实际的区域数据。转到时刻时区数据构建器并包括您关心的区域。将其放入另一个名为moment-timezone-data.js并包含它的文件中，或将其放入现有脚本中。请参阅这些文档。

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

此外，在您的示例代码中，当您第一次使用时区调用 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 毫秒就可以了，但您可能会发现它在视觉上并不流畅。发生这种情况是因为间隔计时器可能与实际时钟不一致。最好每秒更新多次。

于 2013-09-13T19:22:49.953 回答