Analog and digital jQuery world clock plugin – jClocksGMT.js

jQuery world clock plugin, available in analog or digital style.

jClocksGMT.js – jQuery world clock plugin for web

UPDATE: check out the plugin home page for jClocksGMT.js v2.0, with nice new features!

This solution is a nice, jQuery based, digital / analog style world clock, that show the current time in various places (time zones) in the world. Solution based on GMT offsets.

It requires jQuery rotate plugin to work.

Key features

– GMT Timezone Offsets

– Automatic daylight saving time conversion on affected time zones

– Easy CSS and image customization

– Analog and Digital clock modes

– High compatibility (Chrome, Safari, Firefox, Opera, IE7+, IOS4+, Android, windows phone)

jClocksGMT.js - analog / digital jQuery world clock plugin
jClocksGMT.js – analog / digital jQuery world clock plugin

How to use it

Include jquery and the jClocksGMT scripts:

<script src="js/jquery-1.9.0.js"></script>
<script src="js/jClocksGMT.js"></script>
<link rel="stylesheet" href="css/jClocksGMT.css">
...

Create the HTML markup for the clock:

<div id="clock_dc" class="clock_container">
    <div class="lbl">Washington, DC</div>
    <div class="clockHolder">
        <div class="rotatingWrapper">
            <img class="hour" src="images/clock_hour.png" />
        </div>
        <div class="rotatingWrapper">
            <img class="min" src="images/clock_min.png" />
        </div>
        <div class="rotatingWrapper">
            <img class="sec" src="images/clock_sec.png" />
        </div>
        <img class="clock" src="images/clock_face.png" />
    </div> 
    <div class="digital">
        <span class="hr"></span><span class="minute"></span>
        <span class="period"></span>
    </div>
</div>

Run the plugin – fox example:

$("#clock_dc").jClocksGMT({offset: '-6', 
  analog: true, digital: true, hour24: false});

License: MIT

Examples:

http://kingkode.com/jclocksgmt-js

Get jQuery world clock plugin from GitHub:

https://github.com/mcmastermind/jClocksGMT

See also:

How to Make a stylish Digital Clock with jQuery and CSS3

jQuery countdown timer plugins

DrumJS – A jQuery animated date picker and value selector (iOS style)

3…2…1… Enjoy!

Share:Share on Facebook0Share on Google+0Tweet about this on TwitterShare on LinkedIn1Pin on Pinterest1