Create Customizable Analog Clocks With JavaScript – MagicClock

Category: Date & Time , Javascript | August 18, 2022
Views Total:550 views
Official Page:Go to website
Last Update:August 18, 2022


Create Customizable Analog Clocks With JavaScript – MagicClock


MagicClock is a vanilla JavaScript library for creating customizable analog clocks on the webpage. It uses HTML5 canvas and custom clock images to imitate the classic clock look, with a needle sweeping around the clock face.

This analog clock library is written in pure JavaScript and released under the MIT license. It does not require any build steps or third-party libraries. Just copy and paste the code into your webpage.

How to use it:

1. Download and load the MagicClock.js library in the document.

<script src="MagicClock.js"> </script>
2. Create a basic analog clock.
  • PositionX: X-axis
  • PositionY: Y-axis
  • width: Width in px
  • theme: custom theme
// MagicClock(PositionX, PositionY, width, theme = null);
let myClockThemeDefault = new MagicClock(20, 20, 250);

3. Create a custom analog clock using PNG or vector art resources.

let theme= {
    "secondHandSrc" : "themes/Theme1/Seconds.png" ,
    "handPivotHX": 0.5,
    "handPivotHY": 0.72,
    "handPivotMX": 0.5,
    "handPivotMY": 0.72,
    "handPivotSX": 0.5,
    "handPivotSY": 0.72
let myClock = new MagicClock(20, 20, 250, theme);

You Might Be Interested In:

Leave a Reply