jQuery Based Analog And Digital World Clock – jClocksGMT.js

jClocksGMT is a jQuery analog and digital clock(s) plugin based on GMT offsets. Now supporting automatic daylight saving time conversions for affected timezones. Requires jQuery Rotate plugin. The primary features of Analog And Digital World Clock Plugin:

  • Analog Clock
  • Digital Clock
  • Date Display
  • 5 Clock Skins
  • jQuery Rotate
  • Custom time formats
  • Custom date formats
  • GMT Timezone Offsets
  • Automatic Daylight Saving Time conversion on affected timezones
  • Easy CSS customization
  • Easy image customization

Live Demo

How to Use

Add the css below to your html page

<link rel="stylesheet" href="css/jClocksGMT.css">

Create a container where you want to render Clock

<div id="clock_hou"></div>
<div id="clock_india"></div>
<div id="clock_korea"></div>
<div id="clock_uk"></div>
<div id="clock_tokyo"></div>

Load jQuery library together with the Analog And Digital World Clock library into your code

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="js/jClocksGMT.js"></script>
<script src="js/jquery.rotate.js"></script>
<script>
    $(document).ready(function () {

        $('#clock_hou').jClocksGMT({
            title: 'Houston, TX, USA',
            offset: '-6'
        });

        $('#clock_india').jClocksGMT({
            title: 'New Delhi, India',
            offset: '+5.5',
            dst: false,
            skin: 2,
            timeformat: 'HH:mm'
        });

        $('#clock_korea').jClocksGMT({
            title: 'Seoul, S. Korea',
            offset: '+8',
            skin: 3,
            date: true
        });

        $('#clock_uk').jClocksGMT({
            date: true,
            dateformat: 'YYYY/MM/DD',
            skin: 4
        });

        $('#clock_tokyo').jClocksGMT({
            title: 'Tokyo, Japan',
            offset: '+9',
            skin: 5
        });

    });
</script>

Source Code

Download

For more Advanced Usages, please check the demo page or visit the official website.