enferlazt-clock
v2.2.0
Published
A JavaScript clock library by Enferlazt
Downloads
1
Readme
enferlazt-clock
It is a JavaScript clock library. Makes it easy to add a clock or time to your website. This library use Moment Timezone for this.
Features
- Two types and four variations these types
- Display caption under clock: city of time zone or any title
- Google map with city location
Demo
You can see it in work here
Install
From CDN:
Inset it in your HTML document:
- In
<head>tag
<link rel="stylesheet" href="https://unpkg.com/enferlazt-clock/dist/enferlazt-clock.min.css">- To end
<body>tag
<script src="https://unpkg.com/enferlazt-clock"></script>It is all. The library ready to work
From a local path:
Load this library from https://github.com/enferlazt/enferlazt-clock Copy src directory into your project. If necessary rename directory. This includes code on ECMA2015 and will be have partical browser support. You can edit this files for your project.
- In
<head>tag
<link rel="stylesheet" href="src/enferlazt-clock.css">- To end
<body>tag
<script src="src/enferlazt-clock.js"></script>It is all. The library ready to work
Usage
For usage enough paste this code:
<enferlazt-clock type="analog" location="Europe/London"></enferlazt-clock>It is simplest example of usage this library. It includes two required parameters: type and location.
Required fields
type - is first required field, can have one of two values:
analogeordigitalclock.location - is second required field which depends on the Moment Timezone library. You can only use their location values, for example:
America/New_YorkorAmerica/Argentina/Buenos_Aires.
Non-required common fields
title - this adds a caption with arbitrary text under clock
map - it is adds a title with city from location, which acts as a switch between clock and Google map with the city location. You can change the caption text in title field. Content of this field displays on Google map, for example
map="San Francisco"withlocation="America/Los_angeles"displays San Francisco on maptitle-styles - css styles of title, works only with usage field title or map
seconds="false" - disable seconds on clock
Additional fields of analog type
Attention! This fields works only with type="analog"
variation - analog clock has three style variation, can has value from 1 to 3
bgImg - custom clock face image of clock(without hands). Clock hands will keep images of their variation. Recommended size with equal height and width, like 170 x 170 pixels.
hourImg - custom image for hour hand. Clock face & rest hands will keep images of their variation. Hand nut should be in center image and hand points twelve. Recommended size with equal height and width, like 170 x 170 pixels.
minImg - custom image for minute hand. Clock face & rest hands will keep images of their variation. Hand nut should be in center image and hand points twelve. Recommended size with equal height and width, like 170 x 170 pixels.
secImg - custom image for second hand. Clock face & rest hands will keep images of their variation. Hand nut should be in center image and hand points twelve. Recommended size with equal height and width, like 170 x 170 pixels.
Additional fields of digital type
- styles - can contains css styles for digital clock, for example:
<enferlazt-clock
type="digital"
location="Europe/London"
styles="font: italic 1.2em 'Fira Sans', serif;
color: green;
width: 300px;
height: 300px;"
></enferlazt-clock>