jQuery plugin: jClock

Current version: 1.2.0
Filesize: 2591 bytes
License: MIT/GPL

Files:

Download jClock plugin 1.2.0

Download jClock plugin 2.0.1 (new)

Dependencies

Articles

Documentation

  • jClock()
  • jClock(options)

    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>
                  
    Demo Example 1

    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>
    
                  
    Demo Example 2

    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>
    
    </head>
    
    <body>
    
    <div class="jclock"></div>
    
    </body>
    </html>
    
                  
    Demo Example 3

    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>
    
                  
    Demo Example 4

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