jump to navigation

Creating a Clock with JQuery’s “Jclock” Plugin November 13, 2011

Posted by Tournas Dimitrios in JQuery.
trackback

In this article you will explore how to add time in local  or some other time-zone format , you need to include the JQuery.jclock.js plugin along with the JQuery library  . The plugin is only 3k in size and takes eight configuration options like : 

  • timeNotation (String): Type of time display: ‘24h’ or ‘12h’ (’12hh’ inserts leading 0). Default : ‘24h’am_pm , 
  • 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 . default : false
  • utc_offset (Number): If specified, sets offset from UTC, negative or positive. Default: 0
  • fontFamily (String) : If specified, sets CSS font-Family. Default: null
  • fontSize (Number) : If specified , sets CSS font-Size . Default: null 
  •  background (String) : If specified , sets CSS background color . Default: null
  • foreground (String) : If specified , sets CSS foreground color. Default: null

Let demonstrate some practical examples :

/*
Embed the Jquery library and the plugin
Create an empty div with id="clock"
*/
//First example : Time with defauld options
<script type="text/javascript">
$(function($) {
$('#clock').jclock();
});
</script>
//Second example : With styling options
<script type="text/javascript">
$(function($) {
var options = {
timeNotation: '12h',
am_pm: true,
fontFamily: 'Verdana, Times New Roman',
fontSize: '10px',
foreground: 'white',
background: 'black'
}
$('#clock').jclock(options);
});
</script>
//Third example : UTC time-zome with offset
<script type="text/javascript">
$(function($) {
var options = {
utc: true ,
utc_offset: -2
}
$('#clock').jclock(options);
});
</script>

Download the plugin from GitHub .

Browsing around , I found out this code snippet , it’s a pretty cool way to display the time on your web page using jQuery to get the current time and then refresh the clock every 1 second .

function updateClock ( )
    {
  var currentTime = new Date ( );
  var currentHours = currentTime.getHours ( );
  var currentMinutes = currentTime.getMinutes ( );
  var currentSeconds = currentTime.getSeconds ( );

    // Pad the minutes and seconds with leading zeros, if required
  currentMinutes = ( currentMinutes < 10 ? "0" : "" ) + currentMinutes;
  currentSeconds = ( currentSeconds < 10 ? "0" : "" ) + currentSeconds;

  // Choose either "AM" or "PM" as appropriate
  var timeOfDay = ( currentHours < 12 ) ? "AM" : "PM";

  // Convert the hours component to 12-hour format if needed
  currentHours = ( currentHours > 12 ) ? currentHours - 12 : currentHours;

  // Convert an hours component of "0" to "12"
  currentHours = ( currentHours == 0 ) ? 12 : currentHours;

    // Compose the string for display
  var currentTimeString = currentHours + ":" + currentMinutes + ":" + currentSeconds + " " + timeOfDay;

  $("#jclock").html(currentTimeString);

 }

$(document).ready(function()
{
  setInterval('updateClock()', 1000);
});

The code of this clock is from jquery4u.com .

Comments»

No comments yet — be the first.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s