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:

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/jquery.ht-analog-clock.min.js"></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 () {
  $("#basic").htAnalogClock();
});

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

$(function () {
  $("#basic").htAnalogClock({
    // options here
  }, {
    timezone: "America/Los_Angeles"
  });
});

5. Customize the appearance of the analog clock.

$(function () {
  $("#basic").htAnalogClock({
    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 () {
  $("#gray_fantastic").htAnalogClock(htAnalogClock.preset_gray_fantastic);
  $("#black_bolded").htAnalogClock(htAnalogClock.preset_black_bolded);
  $("#nice_bolded").htAnalogClock(htAnalogClock.preset_nice_bolded);
  $("#ocean_blue").htAnalogClock(htAnalogClock.preset_ocean_blue);
  $("#white_nice").htAnalogClock(htAnalogClock.preset_white_nice);
  $("#modern_dark").htAnalogClock(htAnalogClock.preset_modern_dark);
});

---

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