Simple & Clean Analog Clock JS Library – Clock.js

Preview:

Description:

This is a lightweight JavaScript library for embedding a responsive classic analog clock on your web page. Built using vanilla JavaScript, SVG, and CSS3 2D transforms.

This analog clock allows you to specify the timezone and choose whether to display the second hand. It’s perfect for displaying time on your website in a clean way.

How to use it:

1. Download the library and include the clock.min.js script in your HTML document:

<script src="clock.min.js"></script>

2. Insert the clock container into your HTML. Set the offset attribute to specify the UTC offset. The default is UTC-0.

<div id="clock" offset="-06:00"></div>

3. To display the second hand, set the second attribute to “true”. By default, the second hand is hidden.

<div id="clock" offset="-06:00" second="true"></div>

How it works:

The clock leverages SVG for the clock face and CSS3 transforms for hand rotation. The JavaScript code dynamically updates the rotation of the hour, minute, and (optionally) second hands based on the current time and specified offset.