How to use moment.JS for a certain timezone and di

2019-03-27 08:55发布

站内问答 / JavaScript
482 1 4

How do I go about using the Moment.JS library for an international timezone and display it in real time?

This is what I have so far in my index page.

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>

This is my first time using MomentJS and I dont know if I have implemented it correctly and to display it in real time without refreshing the page constantly.

1条回答
姐就是有狂的资本
2楼-- · 2019-03-27 09:04

You are missing the actual zone data. Go to the moment-timezone data builder and include the zones you care about. Put that in another file called moment-timezone-data.js and include it, or place it inline your existing script. See these docs.

To update it in realtime, you need to update the element on a regular interval.

Also, in your example code, the first time you are calling moment with the timezone, you are throwing away the response. The second call, you're not using the time zone. And you don't need jQuery here.

Putting it all together:

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

You might think that setting the interval to 1000 ms would be ok, but you may find that it visually does not tick smoothly. That happens because the interval timer might not align with the actual clock. It's better to update multiple times per second.

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(4)