1. Introduction
Article will showcase a super realistic analog clock written in jQuery, HTML and CSS3 by Codehim.
2. Links
3. Features
- Fully customizable, simple adoptation to your needs,
- Attractive and clear design,
- Clock is available in 3 Sizes, X small, X large and Original Size 250 by 250,
- CSS3 transformation based clock's hands motion,
- Exact time - according to the server time,
- Stylish Date and day badge,
- Chrome, Safari, Firefox, Opera, IE7+, IOS, Android and windows phone supported.
4. How to install
Widget runs as jQuery plugin so first include jquery javascript into your website:
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
Import Codehim Clock plugin's JavaScript & CSS files into the HTML document:
<!--Codehim Clock JS-->
<script src="js/jquery.codehim.clock.js"></script>
<!--Codehim Clock CSS-->
<link rel="stylesheet" href="css/codehim-clock.css" />
Create container on your website in which you want to display clock widget. It can be placed anywhere on your website:
<div class="analog-clock-place"></div>
Call CodehimClock()
function with this selector in DOM ready function:
$(function() {
$(".analog-clock-place").CodehimClock();
});
There are three possible widget sizes you can use:
original
$(function() { $("..analog-clock-place").CodehimClock({ clockSize: "original" }); });
xsmall
$(function() { $(".analog-clock-place").CodehimClock({ clockSize: "xsmall" }); });
- xlarge
To hide/show seconds hand use$(function() { $(".analog-clock-place").CodehimClock({ clockSize: "xlarge" }); });
showSeconds
attribute:$(function() { $(".analog-clock-place").CodehimClock({ showSeconds: : true, //false to hide seconds hand }); });
To show date and day in clock use showDate
attribute:
$(function() {
$(".analog-clock-place").CodehimClock({
showDate: : true, //false to hide date and day - default is true
});
});
{{ 'Comments (%count%)' | trans {count:count} }}
{{ 'Comments are closed.' | trans }}