Javascript世界时钟仅显示在表中

时间:2014-11-13 23:52:15

标签: javascript twitter-bootstrap

我正在尝试展示来自世界各地几个不同城市的时间,我已经搜索过谷歌,甚至使用了这里找到的答案:World Clock API in php or in javascript,但时钟只显示在表格中。我使用了这个网站的教程:http://www.proglogic.com/code/javascript/time/worldclock.php(其中包括。这个似乎是最直接的。)。

我试图让它显示在我的导航栏中,类似于此页面:https://www.blackcard.com/,所以表格似乎不太合适。当然,我可能错了。

另外,我正在使用Bootstrap,如果这很重要的话。

如果您有任何想法,请告诉我。

谢谢!

1 个答案:

答案 0 :(得分:1)

我会将moment.js用于此

您需要这两个文件:

http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.3/moment.min.js http://momentjs.com/downloads/moment-timezone-with-data.min.js

使用moment.js,您可以执行以下操作:

<强> HTML:

<div id="myCoolNavBarr"></div>

<强>的javascript

//create a "moment" object from the current date/time
//use the timezone functionality to to set the timezone of the "moment"
//specify the format to display just the time 
var newYork = moment.tz("America/Los_Angeles").format("h:mm: A");
var london = moment.tz("Europe/London").format("h:mm: A");
var hongKong = moment.tz("Asia/Hong_Kong").format("h:mm: A"); 
var tokyo = moment.tz("Asia/Tokyo").format("h:mm: A");


//put them to use 
$("#myCoolNavBarr").append("NY  "+newYork+ " --- LDN  " +london+ " --- HK  " +hongKong+ " --- TYO  " +tokyo)

这是一个有效的JsFiddle