KroTek Banner
JavaScript Clock Banner Image

This is the Chrono Lisa showing the time that is on your computer's clock.

Java Code Image

If you can't see the clock, it is most likely because you are running an older version of your browser. As per this page.

A version for your own site More

If you would like a version of the clock for your own website, you're welcome to it. Simply cut and paste the code below into your HTML.

In the "body" tag, add the following attribute:

 <body onload ="fClock(); setInterval('fClock()', 500 )" />

And then, in the content of your page ...

 <canvas id="cl" width="300" height="400"></canvas>

                       //  (red| grn|blue|alph) 
  kt_oframe         = "rgba(  0,   0,   0, 1.0)"  // outside frame
  kt_cframe         = "rgba(192, 192, 192, 0.5)"  // frame   
  kt_iframe         = "rgba(  0,   0,   0, 1.0)"  // inside edge of frame

  kt_cface          = "rgba( 60,  60,  60, 1.0)"  // clock face

  kt_ohourring      = "rgba(192, 255,   0, 1.0)"  // outside edge of hour lights
  kt_ihourring      = "rgba(192, 255,   0, 1.0)"  // inside of hour lights
  kt_ominutering    = "rgba(  0,  50, 205, 1.0)"  // outside edge of minute lights
  kt_iminutering    = "rgba(100,   0, 255, 1.0)"  // inside of minute lights
  kt_osecondring    = "rgba(205,  50,   0, 1.0)"  // outside edge of second lights
  kt_isecondring    = "rgba(255,   0,   0, 1.0)"  // inside of minute lights

  kt_o1hourmarks    = "rgba(255, 255, 255, 1.0)"  // these are the lights that mark
  kt_i1hourmarks    = "rgba(255,   0, 255, 1.0)"  // ... the hours (every 5th light)
  kt_o10minutemarks = "rgba(205,   0, 205, 1.0)"  // ... and divide the minute oval
  kt_i10minutemarks = "rgba(255,   0, 255, 1.0)"  // ... by tens
  kt_o15secondmarks = "rgba(205,   0, 205, 1.0)"  // ... and the seconds by fifteens
  kt_i15secondmarks = "rgba(255,   0, 255, 1.0)"  // ... to make the clock easier to
                                                  // ... read at a glance
  kt_alink          = true                        // or false, link to
  kt_version        = "1.0.2"                     // Software version. (Do not edit) 
 <script src="">

Setup Information

Starting with the canvas, the width and height can be anything you want. Whatever is unused simply defaults to transparent and the clock will fit itself into the centre of drawing area. The upshot of this is there is no longer a need to set a background colour and the clock can be placed on patterned backgrounds.

Continuing to work from the outside and moving toward the middle, the "oframe" is a line around the very outside of the clock. Next would come the "cframe", which is the solid colour of the frame itself. The "iframe" is another line around the inside of the frame (or the outside of the face). The "cface" is the region the lights show up against.

Colours can be set with any valid CSS colour method, as per this page. The format shown here is gives red, green, and blue components, then a value for "alpha", or transparancy. In this format, the colour components are each specified by a number in the range 0 to 255. The value 0 indicates no contribution from this colour, and the value 255 indicates the maximum amount.

Alpha is in the range 0.0 to 1.0, with 0 being fully transparent, and 1 representing full opacity, permitting a way to remove unwanted components. For example, if you want to draw the clock without the frame, simply set all of the frame component alpha values to 0. The spaces shown here are just for formatting and are optional, the commas are not.

The lights themselves are made up of two parts: an outline - prefixed 'o'; the light itself - prefixed 'i'. Setting them to the same colour gives a large light.

The "alink" parameter will send anyone who clicks on the the clock to the KroTek website. This is not mandatory, and very much appreciated.

You can just link to the program by leaving the "src" attribute as is, or you can download the program here, and store it in your own file system.

    Welcome  |  Purchase  |  JS  |  About  |  Links  |  Contact