Customizable Analog Clock With Timezone Support - htAnalogClock

File Size: 7.37 KB
Views Total: 3468
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Customizable Analog Clock With Timezone Support - htAnalogClock

htAnalogClock is a jQuery plugin to generate fully responsive, highly customizable, canvas based analog clocks with 7 predefined presets and custom timezone support.

Full Preview:

Customizable Analog Clock With Timezone Support Full View

How to use it:

1. Download and put the minified version of the htAnalogClock plugin after loading jQuery library.

<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/"></script>

2. Create an HTML5 canvas element on which the analog clock will be drawn.

<canvas id="basic" height="200"></canvas>

3. Call the function htAnalogClock on the canvas element to render a basic analog clock.

$(function () {

4. Define the timezone to create an international clock that displays the current local time around the world.

$(function () {
    // options here
  }, {
    timezone: "America/Los_Angeles"

5. Customize the appearance of the analog clock.

$(function () {
    hasShadow: true,
    shadowColor: "#000",
    shadowBlur: 10,

    drawSecondHand: true,
    drawMajorTicks: true,
    drawMinorTicks: true,
    drawBorder: true,
    drawFill: true,
    drawTexts: true,
    drawPin: true,

    majorTicksColor: "#f88",
    minorTicksColor: "#fa0",

    majorTicksLength: 10.0,
    minorTicksLength: 7.0,
    majorTicksWidth: 0.005,
    minorTicksWidth: 0.0025,

    fillColor: "#333",
    pinColor: "#f88",
    pinRadius: 5.0,

    borderColor: "#000",
    borderWidth: 2.0,

    secondHandColor: "#f00",
    minuteHandColor: "#fff",
    hourHandColor: "#fff",

    fontColor: "#fff",
    fontName: "Tahoma",
    fontSize: 10.0,

    secondHandLength: 90.0,
    minuteHandLength: 70.0,
    hourHandLength: 50.0,

    secondHandWidth: 1.0,
    minuteHandWidth: 2.0,
    hourHandWidth: 3.0

6. Or use predefined presets as follows.

$(function () {

This awesome jQuery plugin is developed by dexise. For more Advanced Usages, please check the demo page or visit the official website.