Techie-Gyan

Subscribe via Email

 

jQuery Clock plugin: jClock

Jquery clock plug-in can be used to show local time or some other time zone rime very easily. Websites dealing with multiple locations or having offices at multiple locations can use this feature on their websites.

You just need to include the javascript file along with jquery which is the only dependency.

 
<script src="http://plugins.jquery.com/files/jquery.jclock-1.2.0.js.txt" type="text/javascript"></script>
 

Use following code to show clock on your website

 
<script type="text/javascript">
$(function($) {
    $('.jclock').jclock();
});
</script>
 

 
<div class="jclock"></div>
 

Use following code to show clock with some styling using options object.

 
<script type="text/javascript">
$(function($) {
   var options = {
        timeNotation: '12h',
        am_pm: true,
        fontFamily: 'Verdana, Times New Roman',
        fontSize: '20px',
        foreground: 'yellow',
        background: 'red'
      }; 
   $('.jclock').jclock(options);
});
</script>
 

 
<div class="jclock"></div>
 

Show UTC time

 
<script type="text/javascript">
$(function($) {
     var options = {
        utc: true
      };
    $('.jclock').jclock(options);
});
</script>
 

 
<div class="jclock"></div>
 

Show India time (using UTC offset)

 
<script type="text/javascript">
$(function($) {
    var options={
        utc: true,
        utc_offset: 5.5
      };
    $('.jclock').jclock(options);
});
</script>
 

 
<div class="jclock"></div>
 

India Time:

• timeNotation (String): Type of time display: ’24h’ or ’12h’ (’12hh’ inserts leading 0). Default: ’24h’
• am_pm (Boolean): true/false. If true, displays A.M./P.M. Default: false (12h timeNotaion only)
• utc (Boolean): true/false. If true, shows time using UTC. Defaul: false
• utc_offset (Number): If specified, sets offset from UTC, negative or positive. Default: 0
• fontFamily (String): If specified, sets CSS fontFamily. Default: null
• fontSize (Number): If specified, sets CSS fontSize. Default: null
• foreground (String): If specified, sets CSS foreground color. Default: null
• background (String): If specified, sets CSS background color. Default: null

Most Commented Posts

• Using Jquery – Check boxes and Radio buttons
• How to edit /etc/fstab when at Fedora “Repair filesystem” prompt?
• Ajax File upload – Jquery Plugin

If you enjoyed this post, please consider to leave a comment or subscribe to the feed and get future articles delivered to your feed reader.

Powered by Wordpress | WP Premium theme by WP Remix
Copyright 2008. Techie-Gyan. All rights reserved

• Home
• About