Create Customizable Analog Clocks Using Pure JS – analogClockJs

Category: Date & Time , Javascript | May 3, 2017
Views Total:3,042 views
Official Page:Go to website
Last Update:May 3, 2017


Create Customizable Analog Clocks Using Pure JS – analogClockJs


analogClockJs is a standalone JavaScript library to generate customizable, easy-to-style Analog Clocks using plain JavaScript & CSS.

How to use it:

To use the analogClockJs, you have to load the main JavaScript file analogClock.js in the html file.

<script src="analogClock.js"></script>

Create a clock container with a unique ID ‘clock’.

<div id="clock"></div>

Generate a default Analog Clock inside the container element.


Customize the Analog Clock by passing the following options as an object to the AnalogClock() method.

AnalogClock("clock", { 
  // text color
  foreColor: "#000"
  // width
  width: 400,
  // bg color 
  bgColor: "#eee" 

Base on object use, returns a clock object, can do some further style control by the returned object.

var opt = new AnalogClockOption(); opt.width = 100;
var clock = new AnalogClock("clock", opt); = "solid 1px red";

You Might Be Interested In:

Leave a Reply