Documentation

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

This documentation is for v2.x of dyClockJS project.

Digital Clock

Analog Clock

Download

Click here to download the latest release of this project.

Prerequisite

dyClockJS v2.x requires no jQuery.

Getting started

Download the latest release version of dyClockJS from its GitHub repository.

Or, use NPM npm install --save dyclockjs to get the latest release of the project.

Or, you can use it from jsDelivr CDN.

Once you have download the project, unzip the directory and you will find the compressed version of the code in dist directory.

For uncompressed version check the src directory.

Inside the `dist` directory

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

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

The dist/image folder contains some clock face image.

The dist/js folder contains some javascript files and we will be using the dyclock.min.js file.

HTML

First include the dyclock.min.css file inside the head tag.

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

Now include dyClockJS JavaScript file in the body tag generally at the end of the page.

<!-- next dyClockJS -->
<script src="/path/to/dist/js/dyclock.min.js">

The .dyclock-container class

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

In the following example we have created two divs and set their id to id = "digital-clock" and id = "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>

Example to get started

<!DOCTYPE html>
<html>
  <head>
  <title>Index Page</title>
  <link type="text/css" rel="stylesheet" href="css/default.css">

  <!-- dyClockJS style -->
  <link type="text/css" rel="stylesheet" href="path/to/dist/css/dyclock.min.css">

  </head>
  <body>

  <!-- put your content here -->

  <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>

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

  </body>
</html>

The dyClock object

In order to create a digital or 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 some configurations for the clock.

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

So, for example in the above HTML example we have a div having id digital-clock and if we want to create a digital clock then we will set the following as target.

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

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

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

How to start the clock?

To start the clock we call the start() method.

clockObj.start();

How to stop the clock?

To stop the clock we call the stop() method.

clockObj.stop();

Now, let us talk about the configuration options for the digital and analog clocks.

Configuration options for digital clock

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		Used to style the digital clock time.

digitalStyle Object

Name	Type	Default	Description
backgroundColor (optional)	String	"#fff"	Hex/Name of the color.
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.
fontSize (optional)	Integer String	16	Font size of the digital clock time. Example: 24 "120%"

List of custom font family names

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

Sample code to create a digital clock

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();

Now we will cover the analog clock options.

Configuration options for analog clock

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.
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.
border (optional)	String	"none"	Border style. Example: "1px solid #333"
handsColor (optional)	Object		Color of the 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 instead of sharp edges.
shape (optional)	String	"circle"	Shape of the analog clock. Possible value: "circle" "other"

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.

Sample code to create an analog clock

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 : "plugins/dyClockJS/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();