dyClockJS
This documentation is for v1.x of dyClockJS project.
dyClockJS is a small plugin to create digital and analog clock for your blog and website.
Click here to download the latest release of this project.
dyClockJS needs jQuery v1.8 or above. Download jQuery from their website.
Download the latest release version of dyClockJS from its GitHub repository. Unzip the project folder and you will see the following structure.
The css folder contains some stylesheet files. We will be using the dyclock.min.css file.
dyclock.min.css
The font folder contains some font files from Google Fonts. They are for styling the clock time.
The image folder contains some clock face image.
The js folder contains some javascript files and we will be using the dyclock.min.js file.
dyclock.min.js
Alright, its time to start using the dyClockJS in our project. Let us assume that we have a project named awesome-project.
awesome-project/ │ ├── css/ │ │ │ └─ default.css │ ├── image/ │ ├── js/ │ │ │ ├─ default.js │ └─ jquery.min.js │ ├── plugins/ │ └── index.html
Now we will place the dyClockJS folder inside the plugins folder.
awesome-project/ │ ├── css/ │ │ │ └─ default.css │ ├── image/ │ ├── js/ │ │ │ ├─ default.js │ └─ jquery.min.js │ ├── plugins/ │ │ │ └─ dyClockJS/ │ │ │ ├─ css/ │ │ │ │ │ └─ dyclock.min.css │ │ │ ├─ font/ │ │ │ ├─ image/ │ │ │ └─ js/ │ │ │ └─ dyclock.min.js │ └── index.html
Now let us go ahead and create some clocks inside the index.html file.
index.html
First include the dyclock.min.css file inside the head tag.
<link rel="stylesheet" href="/path/to/dyclock.min.css" />
Now include jQuery and dyClockJS JavaScript files in the body tag generally at the end of the page.
<!-- first jQuery --> <script type="text/javascript" src="/path/to/jquery.min.js"> <!-- next dyClockJS --> <script type="text/javascript" src="/path/to/dyclock.min.js">
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.
div
dyclock-container
In the following example we have created two divs and set their id to id = "digital-clock" and id = "analog-clock" respectively.
id = "digital-clock"
id = "analog-clock"
<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>
<!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="plugins/dyClockJS/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 type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="plugins/dyClockJS/js/dyclock.min.js"></script> </body> </html>
Now its time to write some JavaScript code.
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.
target
options
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.
digital-clock
var clockObj = new dyClock( $("#digital-clock"), options );
To start the clock we call the start() method.
start()
clockObj.start();
To stop the clock we call the stop() method.
stop()
clockObj.stop();
Now, let us talk about the configuration options for the digital and analog clocks.
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.
format
digitalStyle
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/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();