Basic clock

This shows a basic clock:

    <html>
            <head>
                    (...)
                    <!-- step 1: add the javascript file -->
                    <script src="/javascript/anclock/anclock.class.js"></script>
            </head>
            <body>
                    (...)

                    <!-- step 2: create an div element with an id -->
                    <div id="myclock"></div>

                    (...)

                    <!-- step 3: init clock -->
                    <script>
                            var oClock=new Anclock("myclock");
                    </script>
            </body>
    </html>
    

Options

You can initialize the clock and send an options array as second parameter.
You also can change the options during runtime with the setOptions method.


The options object can contain one or some of these values:

Variable Type Comments
width string Width of the clock.
The value is a css value. I recommend to use pixel.

example:
{width: '120px'}
height string Height of the clock.
The value is a css value. I recommend to use pixel.
Use the same width and height to keep a round clock.

example:
{height: '120px'}
iAnimate float time in seconds for transition to move clock hands.
If you display the second hands its value should be below 1. I recommend values between 0 .. 0.5.

example:
{iAnimate: 0.3}
bShowDay bool Show the day?
Enable the current day of the month next to the hour "3"?
Valid values: true or false, 0 or 1.

example:
{bShowDay: false}
bShowDigital bool Show the digital clock too?
In the default clock it is set to false.
Valid values: true or false, 0 or 1.

example:
{bShowDigital: true}
bShowSeconds bool Show the seconds?
Enable the display of the seconds value in the digital clock?
In the default clock it is set to false.
Valid values: true or false, 0 or 1.

example:
{bShowSeconds: true}
bShowSecHand bool Show the second hand in the analog clock?
In the default clock it is set to true.
Valid values: true or false, 0 or 1.

example:
{bShowSecHand: false}
bStopped bool Set true to keep the shown time.
Default is false; the clock is running and updates the time.
Valid values: true or false, 0 or 1.

example:
{bStopped: false}
bShowTimeAsTitle bool Use date and time as title? It will be visible on mouseover.
Valid values: true or false, 0 or 1.

example:
{bShowTimeAsTitle: false}
bUseOffset bool Use an offset time or local time?
In the default clock it is set to false (it shows the local time of the computer).
You can set it to true to show the current time of another time zone. Additionally you have to set the offset in the variable iOffset (see below). Valid values: true or false, 0 or 1.

example:
{bUseOffset: true}
iOffset integer Offset to UTC time?
If you set bUseOffset to true then you can set an offset to UTC (London time).

example: show the time of Caracas
{bUseOffset:1, iOffset:-4.5*60}

All options above you can add into an object. This options object you can add as 2nd parameter for initialisation.

    var aOptions={
        width: false,           // size of the clock
        height: false,
        
        iAnimate: 0.0,          // duration for animation of clock hands [s]
        
        bShowDay: true,         // show day of the month (as text)
        bShowSeconds: false,    // show seconds (as text)
        bShowSecHand: true,     // show seconds hand in the analog clock
        
        bUseOffset: false,      // use offset no: show users system time; yes: use iOffset to UTC time
        iOffset: 0             // offset value to UTC in minutes
    };
    var oClock=new Anclock("myclock", aOptions);
    

Use another skin

You can customize the clock and define your own skin.
You need to define an array structure with all skinnable items.
For first steps I suggest to use the code generator: test the options and watch the generated code.
Code generator

The colours for the analog clock items (backgrounds, hands, ...) are css definitions.
You can change their colours in the background attribute. So it is possible to set an background image too.

Define your own skin

In a skin you can define an option preset and additionally set the stiles for the clock. There you can change the style, size, colors used in the clock.
To user your own skin you have to

  1. set key named skins (pl.) in your options. It contains all skins as an array with your own definitions
  2. set skin (sing.) value - it is a pointer to skin to use.
  3. To apply the skin initialize a new clock with the options array
    OR
    use setOptions() method to change the skin of an existing clock.
  // set skins you need to switch between on your page
  var aSkins={
    'black':{
      'options': {

        // put all options here that override the default init settings
        // i.e. bShowSecHand, width, height, ...
        
        'styles': {
         'analog': 'background:#000; border-radius: 50%; border: 5px solid #fff; box-shadow: 0 0 3px #000;',
         'dot1': 'background: #333;',
         'dot2': 'background: #fff;',
         'hhand': 'background: #fff; height: 30%; width: 8%; left: 46%;',
         'mhand': 'background: #fff; height: 45%; width: 6%; left: 47%;',
         'shand': 'background: #f00; height: 48%; width: 2%; left: 49%;',
         'day': 'background:#444; color:#999; border-radius: 5px; border: 1px solid rgba(0,0,0,0.1); padding: 0 2px;'
        }
      }
    }
  };

  // define options and put your skin(s) here
  var aOptions={
    'skins': {
      'black': aSkins['black']
    },
    'skin': 'black'
  }
    

In the styles array you can define css settings

Variable Comments
analog background of the analog clock; useful settings are border-radius and background;
dot1 dots for hours
dot2 dots for hours 3, 6, 9 and 12
hands settings for all clock hands
hhand hour hand
mhand minute hand
shand second hand
day day of the month
digital digital clock (below the analog clock)

Apply skin on a new clock

  // define aOptions ... see above "Define your skins"

  // apply skin on a new clock
  var oClock=new Anclock("myclock", aOptions);

Apply skin on an existing clock

  oClock.setOptions("myclock", aOptions);






Copyright © 2016-2022 Axel Hahn
project page: Sourceforge (en)
Axels Webseite (de)
results will be here