Javascript Clocklib Library Test

Clocklib ia a Javascript library that implements a digital/analog clock for specified canvas elements. This library is implemented for HTML5 html5 logo.

Download clocklib_v0.1.js

Author: Miguel Alejandro Moreno Barrientos, Copyleft 2015

Description Sample HTML5 Code
Default clock without attributes Canvas not sopported. Update browser. 

<canvas class="clockClass" width="300" height="300">
    Canvas not sopported. Update browser.
</canvas>
Default digital clock without attributes Canvas not sopported. Update browser. The same as above with data-type="digital" and height="100"
Analog clock with custom colors Canvas not sopported. Update browser. 

<canvas class="clockClass" width="300" height="300"
    data-color="blue"
    data-background="pink">
    Canvas not sopported. Update browser.
</canvas>
The same as above in digital Canvas not sopported. Update browser. The same as above with data-type="digital" and height="100"
Analog clock with golden gradient background, circles as ticks and roman numerals with custom font-family Canvas not sopported. Update browser. 

<canvas class="clockClass" width="300" height="300"
    data-ticks="circles";
    data-color="#882"
    data-background="black, #ee5, black"
    data-type="analog"
    data-font-family="Andalus"
    data-numerals="roman">
    Canvas not sopported. Update browser.
</canvas>
The same as above in digital Canvas not sopported. Update browser. The same as above with data-type="digital" and height="100"
Analog clock in a non-squared canvas with arabic numerals Canvas not sopported. Update browser. 

<canvas class="clockClass" width="300" height="300"
    data-ticks="circles";
    data-color="#882"
    data-background="black, #ee5, black"
    data-type="analog"
    data-font-family="Andalus"
    data-numerals="roman">
    Canvas not sopported. Update browser.
</canvas>
The same as above in digital Canvas not sopported. Update browser. The same as above with data-type="digital" and height="100"
Analog clock with horizontal gradient and no ticks Canvas not sopported. Update browser. 

<canvas class="clockClass" width="300" height="300"
    data-ticks="none"
    data-color="rgba(255,255,255,0.5)"
    data-background="black, gray, black, gray, black"
    data-gradient="0,0,0,300">
    Canvas not sopported. Update browser.
</canvas>
The same as above in digital Canvas not sopported. Update browser. The same as above with data-type="digital" and height="100"
Analog clock with all attributes Canvas not sopported. Update browser. 

<canvas class="clockClass" width="300" height="300"
    data-ticks="circles"
    data-outer-color="green"
    data-color="#ff5"
    data-background="black, red, green, blue, black"
    data-numerals="roman"
    data-font-family="comic sans ms"
    data-type="analog"
    data-gradient="0,0,0,300">
    Canvas not sopported. Update browser.
</canvas>
The same as above in digital Canvas not sopported. Update browser. The same as above with data-type="digital" and height="100"
Javascript sample code used in this page to run the clocks
var clockHandler;

window.onload = function()
{
    clockHandler = new Clock( 20/*, "clockClass"*/ );
    clockHandler.startStop();
}

'Clock' constructor has the format Clock( [refreshRate[,className]] ).

There are two public methods,

  • startStop(), which starts/stops all clocks in the page
  • isRunning(), which checks if clocks are running
GeneratorClockHTML5 Code