Bira's Thoughts: jClock

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