jClock : jQuery Clock Plugin

(No Ratings Yet)

Loading ...

1,875 views

Simple clock – display 12-hour or 24-hour time notation, local or UTC time.

Options:
* 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

Example 1:

Basic clock, no options

<html>
<head>
  <title>jclock</title>

  <script type="text/javascript" src="jquery-1.2.1.min.js"></script>
  <script type="text/javascript" src="jquery.jclock.js"></script>

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

</head>

<body>

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

</body>
</html>

Example 2:

Clock, non-UTC, with options

<html>
<head>
  <title>jclock</title>

  <script type="text/javascript" src="jquery-1.2.1.min.js"></script>
  <script type="text/javascript" src="jquery.jclock.js"></script>

  <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>

</head>

<body>

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

</body>
</html>

Example 3:

Clock, UTC

<html>
<head>
  <title>jclock

  <script type="text/javascript" src="jquery-1.2.1.min.js"></script>
  <script type="text/javascript" src="jquery.jclock.js"></script>

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

</title></head>

<body>

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

</body>
</html>

Example 4:

Multiple clocks using different time zone offsets

<html>
<head>
  <title>jclock</title>

  <script type="text/javascript" src="jquery-1.2.1.min.js"></script>
  <script type="text/javascript" src="jquery.jclock.js"></script>

  <script type="text/javascript">
    $(function($) {
      var optionsEST = {
        utc: true,
        utc_offset: -5
      }
      $('#jclock1').jclock(optionsEST);

      var optionsCST = {
        utc: true,
        utc_offset: -6
      }
      $('#jclock2').jclock(optionsCST);

      var optionsIndia = {
        utc: true,
        utc_offset: 5.5
      }
      $('#jclock3').jclock(optionsIndia);

    });
  </script>

</head>

<body>

<p>EST: <span id="jclock1"></span></p>

<p>CST: <span id="jclock2"></span></p>

<p>India: <span id="jclock3"></span></p>

</body>
</html>

Example 5:

Styled clocks (first clock uses jquery.corner.js)

<html>
<head>
  <title>jclock</title>

  <style type="text/css">
    body {
      font: Verdana,Arial,sans-serif;
      /* An explicit background color is required for Safari. */
      /* Otherwise your corner chunks will come out black!    */
      background: #f8f0e0;
    }
    div.corner, div.nocorner {
      width: 10em;
      padding: 20px;
      margin: 1em;
      background: #f00;
      color: #000;
      text-align: center;
      font: verdana, arial, sans-serif;
    }
  </style>

  <script type="text/javascript" src="jquery-1.2.1.min.js"></script>
  <script type="text/javascript" src="jquery.jclock.js"></script>
  <script type="text/javascript" src="jquery.corner.js"></script>

  <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);

      $('.corner').corner("30px");

    });
  </script>

</head>

<body>

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

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

</body>

</html>

Demo:

Download: http://github.com/dsparling/jclock/tree/master
Source: http://jquery.jclock.js.googlepages.com/jclock.html

http://www.ajaxupdates.com/wp-content/plugins/sociofluid/images/stumbleupon_32.png

http://www.ajaxupdates.com/wp-content/plugins/sociofluid/images/delicious_32.png

http://www.ajaxupdates.com/wp-content/plugins/sociofluid/images/blinklist_32.png

http://www.ajaxupdates.com/wp-content/plugins/sociofluid/images/furl_32.png

http://www.ajaxupdates.com/wp-content/plugins/sociofluid/images/technorati_32.png

http://www.ajaxupdates.com/wp-content/plugins/sociofluid/images/magnolia_32.png

http://www.ajaxupdates.com/wp-content/plugins/sociofluid/images/google_32.png

http://www.ajaxupdates.com/wp-content/plugins/sociofluid/images/myspace_32.png

http://www.ajaxupdates.com/wp-content/plugins/sociofluid/images/facebook_32.png

http://www.ajaxupdates.com/wp-content/plugins/sociofluid/images/sphinn_32.png

http://www.ajaxupdates.com/wp-content/plugins/sociofluid/images/mixx_32.png

http://www.ajaxupdates.com/wp-content/plugins/sociofluid/images/twitter_32.png

Related Listings:

Jquery Plugin – Feedback Feedback is a jQuery plugin that lets you send Feedback...
Page Peel with Jquery Plugin A jquery plugin to implement a page peel effect to...
imgAreaSelect with jQuery Plugin imgAreaSelect is a jQuery plugin for selecting a rectangular area...
Accordion Plugin using Jquery Script This plugin is now part of jQuery UI and this...
jQuery Binary Tree Plugin This script allows you to, with just one call, rearrange...