dyClockJS

Project

Share
dyClockJS logo

dyClockJS is a small plugin to create digital and analog clock for your blog and website.

license npm version

Become a Patron

If you find this project useful then feel free to back it. I'm on Patreon

Become a Patron!

Feeling generous

Buy me a cup of tea Donate via PayPal


This documentation is for v2.x of dyClockJS project.

Contents

License

It's free and released under MIT License.

Demo

In the following example we are creating a digital clock and an analog clock using dyClockJS.

Digital Clock


Analog Clock



Getting started

You can start using this plugin in your project in any of the following ways.

The dist directory

For production environment you can use the compressed version found inside the dist directory.

For development purpose you can check out the uncompressed code inside the src directory.

Content of the dist directory

The dist/css directory contains the stylesheet files. We will be using the dyclock.min.css file.

The dist/font directory contains font files from Google Fonts. They are for styling the clock time.

The dist/image directory contains clock-face images.

The dist/js directory contains JavaScript files. We will be using the dyclock.min.js file.

Starter template

In the following example we have starter code for a digital and an analog clock.

<!DOCTYPE html>
<html>
  <head>
  <title>Index Page</title>

  <!-- dyClockJS style -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/dyclockjs@2.0.2/dist/css/dyclock.min.css" integrity="sha256-dTrCwxl6GE8W4PcAFR++A3NXNvoc3drMqDmzmVWJKOU=" crossorigin="anonymous">

  </head>
  <body>

  <!-- put your content here -->

  <div class="some-class">
    <div id="dyclock-digital-clock" class="dyclock-container"></div>
  </div>

  <div class="some-class">
    <div id="dyclock-analog-clock" class="dyclock-container"></div>
  </div>

  <!-- javascript -->
  <script src="https://cdn.jsdelivr.net/npm/dyclockjs@2.0.2/dist/js/dyclock.min.js" integrity="sha256-zocma/6C1EJXLuPyjZzqYerY1LXc0E47tlegKfiEmug=" crossorigin="anonymous"></script>

  <!-- config -->
  <script type="text/javascript">
  //digital clock
  var clockObj_d = new dyClock( "#dyclock-digital-clock", {
    clock : "digital",
    format : "hh:mm:ss A",
    digitalStyle : {
      fontFamily : "Faster One",
      fontSize : 32
    }
  });
  clockObj_d.start();

  //analog clock
  var clockObj_a = new dyClock( "#dyclock-analog-clock", {
    clock : "analog",
    radius : 100,
    image : "https://cdn.jsdelivr.net/npm/dyclockjs@2.0.2/dist/image/c01.png",
    analogStyle : {
      handsWidth : {
        h : 5,
        m : 3,
        s : 2
      },
      roundHands : true,
      shape : "circle"
    }
  });
  clockObj_a.start();
  </script>

  </body>
</html>

HTML

First include the dyclock.min.css stylesheet file in the head.

<link rel="stylesheet" href="/path/to/dist/css/dyclock.min.css" />

Next, include the dyclock.min.js JavaScript file preferably at the end of the page before the closing body tag.

<script src="/path/to/dist/js/dyclock.min.js"></script>

The .dyclock-container class

To create a clock we have to create a div element and give it a class dyclock-container. This div will become the container for the clock.

In the following example we are creating two div elements and having id digital-clock and analog-clock respectively.

<div class="some-class">
  <div id="digital-clock" class="dyclock-container"></div>
</div>

<div class="some-class">
  <div id="analog-clock" class="dyclock-container"></div>
</div>

The dyClock object

In order to create a digital or an analog clock using dyClockJS we first have to create its object.

var clockObj = new dyClock(target, options);

Where target is the clock container id/class and options is an object containing clock configurations.

If targeting by id then use the # sign. For class use the . sign.

For example, in the above HTML example we have a div having id digital-clock so, we will use #digital-clock as the target.

var clockObj = new dyClock( "#digital-clock", options );

Similarly, if we have a div having class lets say simple-digital-clock then, we will write the following.

var clockObj = new dyClock( ".simple-digital-clock", options );

Start the clock

Call the start() method to start the clock.

clockObj.start();

Stop the clock

Call the stop() method to stop the clock.

clockObj.stop();

Fonts

Following are the list of Fonts available with this plugin.

  • Faster One
  • Frijole
  • Londrina Outline
  • Monofett
  • Orbitron
  • Vast Shadow

Digital clock configurations

Following are the list of properties that can be used to configure a digit clock using dyClockJS.

Name Type Default Description
clock
(required)
String "digital" This tells us about the type of the clock.
Possible Values:
"digital"
"analog"
format
(optional)
String "HH:mm:ss" This tells us about the digital time format.

HH = 00-23 (24 hour format) (required)
hh = 01-12 (12 hour format) (required)
mm = 00-59 (minutes) (required)
ss = 00-59 (seconds) (optional)

a = am|pm (optional)
A = AM|PM (optional)

Possible Values:
"HH:mm:ss"
"hh:mm:ss A"
"hh:mm a"
digitalStyle
(optional)
Object This is an object containing style configurations for the digital clock.

digitalStyle object

Name Type Default Description
backgroundColor
(optional)
String "#fff" Hex/Name of the color.
Example:
"#eee"
"lightblue"
border
(optional)
String "none" Border style.
Example:
"1px solid #333"
fontColor
(optional)
String "#000" Color for the font in Hex/Name.
Example:
"#333"
"blue"
fontFamily
(optional)
String "Arial" Name of the font family.
Example:
"Faster One"
fontSize
(optional)
Integer
String
16 Font size of the digital clock.
Example:
24
"120%"

Example

var clockObj = new dyClock( "#digital-clock", {
  clock : "digital",
  format : "HH:mm:ss A",
  digitalStyle : {
    border : '1px solid #999',
    backgroundColor : "lightgrey",
    fontColor : "black",
    fontSize : 48,
    fontFamily : 'Faster One'
  }
});
clockObj.start();

Analog clock configurations

Following are the list of properties that can be used to configure an analog clock using dyClockJS.

Name Type Default Description
clock
(required)
String "digital" This tells us about the type of the clock.
Possible Values:
"digital"
"analog"
hand
(optional)
String "hms" This tells us about the hands of the analog clock.

h = hour hand
m = minute hand
s = second hand (optional)

Possible Values:
"hms"
"hm"
image
(optional)
String
Boolean
false Path of the analog clock face image.
Example:
dyclockjs face image
Image Path:
https://cdn.jsdelivr.net/npm/dyclockjs@2.0.2/dist/image/c01.png
More clock-face images can be found inside the dist/image directory.
radius
(optional)
Integer 150 This is for the radius of the analog clock face.
Min value : 30
Max value : 1200
showdigital
(optional)
Boolean false If this is set to true then the digital clock will be shown below the analog clock.
You have to then set the format and digitalStyle to configure the digital clock.
analogStyle
(optional)
Object This is used to style the analog clock.

analogStyle object

Name Type Default Description
backgroundColor
(optional)
String "#fff" Hex/Name of the color.
Example:
"#eee"
"lightblue"
border
(optional)
String "none" Border style.
Example:
"1px solid #333"
handsColor
(optional)
Object This is an object and it contains configuration to color the clock hands.
handsWidth
(optional)
Object Width/thickness of the hands.
roundHands
(optional)
Boolean false If set to true then, the clock hands will have round corners.
shape
(optional)
String "circle" Shape of the analog clock.
Possible value:
"circle"
"other"
Use "other" if you have some other clock-face shape.

handColor object

Name Type Default Description
h
(optional)
String "#000" Color of the hour hand.
m
(optional)
String "#000" Color of the minute hand.
s
(optional)
String "#000" Color of the second hand.

handWidth object

Name Type Default Description
h
(optional)
Integer 3 Thickness of the hour hand.
m
(optional)
Integer 2 Thickness of the minute hand.
s
(optional)
Integer 1 Thickness of the second hand.

Example

var clockObj = new dyClock( "#analog-clock", {
  clock : "analog",

  //for digital
  format : "hh:mm:ss A",
  digitalStyle : {
    fontColor : "black",
    fontFamily : 'Monofett',
    fontSize : 32,
  },

  //for analog
  hand : "hms",
  image : "path/to/dist/image/c01.png",
  showdigital : true,
  radius : 120,
  analogStyle : {
    backgroundColor : "#e9e9e9",
    border : '1px solid #999',
    handsColor : {
      h : "red",
      m : "orange",
      s : "green"
    },
    handsWidth : {
      h : 9,
      m : 5,
      s : 2
    },
    roundHands : true,
    shape : "circle"
  }
});
clockObj.start();
Share