Javascript World Clock Only Shows in Table

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.).

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.

Also, I am using Bootstrap, if that matters at all.

Let me know if you all have any ideas.

Thanks!

Answers:

Answer

I would use moment.js for this

you will need these two files:

http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.3/moment.min.js http://momentjs.com/downloads/moment-timezone-with-data.min.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)

Here is a working JsFiddle

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.