jQuery Based Analog And Digital World Clock - jClocksGMT.js

jClocksGMT.js is a jQuery plugin that takes advantage of jQuery rotate and CSS to create analog and digital world clocks based on standard GMT offsets.

How to use it:

1. Include jQuery javascript library and required jQuery.rotate.js script on the page

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="js/jquery.rotate.js"></script>

2. Include jQuery jClocksGMT.js plugin on the page

<script src="js/jClocksGMT.js"></script>

3. The sample CSS

.clock_container {
    float:left;
    margin-right:2px;
    width:110px;
    position: relative;
}
.clock_container .lbl {
    font-size:10px;
    color: #333333;
    line-height: 22px;
    background: url(../images/clock_label.png);
    text-align: center;
    height: 27px;
    width: 108px;
    margin: 0 auto;
}
.clockHolder {
    width:100px; 
    margin:0 auto;
    position:relative;
}
.clock {
    margin-left:5px;
}

.sec {
    display:block;
    position:absolute;
}
.min {
    display:block;
    position:absolute;
}
.hour {
    display:block;
    position:absolute;
}

.rotatingWrapper {
    position:absolute;
    width:100px;
    height:100px;
    left: 5px;

}
.digital {
    font-weight:bold;
    font-size: 14px;
    color: #444444;
    text-align:center;
}

4. Create the html for the clock

<div id="clock_hou" class="clock_container">
<div class="lbl">Houston, TX, USA</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>

5. Call the plugin with options

$(document).ready(function(){
$('#clock_hou').jClocksGMT({
offset: '-5', 
hour24: true
});
});

6. All default options.

// Title of location
title: 'Greenwich, England',

// Set Standard GMT offset
offset: '0',

// Does the location observe daylight savings time
dst: true,

// Display digital clock
digital: true,

// Display analog clock
analog: true,

// Time format
timeformat: 'hh:mm A',

// Display date
date: false,

// Date format
dateformat: 'MM/DD/YYYY',

// Starting angle of second hand
angleSec: 0,

// Starting angle of minute hand
angleMin: 0,

// Starting angle of hour hand
angleHour: 0,

// Set 1 of 5 included skins for the analog clock 
skin: 1,

// Set path of images
imgpath: ''

Change log:

v2.0.1 (2016-04-27)

• Added image path parameter for images not in plugin directory
• Fixed digital only display

v2.0 (2016-04-21)

• NEW! 5 clock skins to choose from
• NEW! Timestamp formatting options
• NEW! Date display with formatting options
• NEW! DST parameter for those locations that do not observe DST
• Addressed international DST issues
• Minimized initial markup
• Unique class names to avoid common class declarations

v1.2 (2014-03-21)

• Update

v1.1 (2013-11-06)

• Added resource credit for DST
• Automatic Daylight Saving Time Conversion

About author:

Author: Richard McMaster

Website: http://www.mcmastermind.com

Project homepage: http://www.mcmastermind.com/jclocksgmt-js/

---

This awesome jQuery plugin is developed by mcmastermind. For more Advanced Usages, please check the demo page or visit the official website.