Javascript 世界时钟仅显示在表中 [英] Javascript World Clock Only Shows in Table
问题描述
我正在尝试显示来自世界各地几个不同城市的时间,我已经搜索和谷歌搜索,甚至使用了这里找到的答案:php 或 javascript 中的世界时钟 API,但时钟只会显示在表格中.我使用了这个网站的教程:http://www.proglogic.com/code/javascript/time/worldclock.php(其中之一.这个似乎是最直接的.
I am trying to display times from a few different cities around the world, and I have searched and Google'd and even used the answer found here: World Clock API in php or in javascript, but the clocks will only display in a table. I used this website's tutorial: http://www.proglogic.com/code/javascript/time/worldclock.php (among others. This one seemed the most straight forward.).
我试图让它显示在我的导航栏中,类似于这个页面:https://www.blackcard.com/,所以一张桌子似乎不合适.当然,我可能是错的.
I am trying to get it to display in my nav bar, similar to this page: https://www.blackcard.com/, so a table does not seem like the way to go. Of course, I may be wrong.
另外,我正在使用 Bootstrap,如果这很重要的话.
Also, I am using Bootstrap, if that matters at all.
如果你们有任何想法,请告诉我.
Let me know if you all have any ideas.
谢谢!
推荐答案
为此我会使用 moment.js
您将需要这两个文件:
http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.3/moment.min.jshttp://momentjs.com/downloads/moment-timezone-with-data.min.js
使用 moment.js,您可以执行以下操作:
With moment.js, you could do the below:
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
这篇关于Javascript 世界时钟仅显示在表中的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!