This time, we will introduce how to use jClocksGMT.js to display clocks showing the time of each country based on Greenwich Mean Time (GMT).
With this library, you can easily display multiple timezone clocks on a web page.
For clarity, we will explain the steps in detail.
What is jClocksGMT.js?
jClocksGMT.js is a jQuery-based plugin that can display the time of various countries as analog or digital clocks, based on Greenwich Mean Time.
It offers many options and is easy to customize.
Step 1: Setting up the CSS
First, set up styles for the clock display area (.jcgmt-container).
Add the following CSS to adjust the appearance of the clocks:
<style>
body {
font-size: 16px;
text-align: center;
}
h1{
text-align: center;
font-size: 20px;
line-height: 1.6em;
padding: 20px 0;
}
p{
padding-bottom: 20px;
}
.clockarea{
width: 230px;
margin: 0 auto;
}
.jcgmt-container {
float:left;
padding: 3px;
}
.jcgmt-container .jcgmt-lbl {
font-size:10px;
color: #333333;
line-height: 22px;
background: url(./images/jcgmt-clock_label.png) no-repeat;
text-align: center;
padding-bottom: 5px;
width: 108px;
margin: 0 auto;
}
.jcgmt-clockHolder {
width:100px;
margin:0 auto;
position:relative;
overflow: hidden;
}
.jcgmt-sec,
.jcgmt-min,
.jcgmt-hour {
display:block;
position:absolute;
}
.jcgmt-rotatingWrapper {
position:absolute;
width:100px;
height:100px;
}
.jcgmt-digital,
.jcgmt-date {
font-weight:bold;
font-size: 12px;
color: #444444;
text-align:center;
margin-left:8px;
}
</style>
Step 2: Setting up the HTML
Next, set up the HTML.
Here, we will create two clocks that display the time in Tokyo.
Two areas are prepared to display Tokyo time based on GMT:
“id=”clock_tokyo”” and “id=”clock_tokyo2″”.
<h1>Display Time from Around the World Using jClocksGMT.js Based on GMT</h1>
<p>Below is a clock displaying the time in Tokyo, Japan.</p>
<div class="clockarea">
<div id="clock_tokyo"></div>
<div id="clock_tokyo2"></div>
</div>
Step 3: Setting up JavaScript
Finally, configure the JavaScript to activate the clocks.
Load jquery.min.js (1.7.2), jClocksGMT.js, and jquery.rotate.js.
To display the clocks, write:
$(‘clock area’).jClocksGMT({options})
Then set options such as clock title, GMT offset, time format, and clock skin.
<script src="jquery.min.js"></script>
<script src="jClocksGMT.js"></script>
<script src="jquery.rotate.js"></script>
<script>
$(document).ready(function(){
$('#clock_tokyo').jClocksGMT(
{
title: 'Tokyo, Japan',
offset: '+9',
skin: 5
});
$('#clock_tokyo2').jClocksGMT(
{
title: 'Tokyo, Japan',
date: true,
dateformat: 'YYYY/MM/DD',
offset: '+9',
skin: 4
});
});
</script>
Detailed Settings for jClocksGMT.js
Here is a detailed explanation of the jClocksGMT.js options.
Understanding each option will help you customize the clocks more freely.
Basic Options
- title: Sets the clock title. Example: ‘Tokyo, Japan’
- offset: Sets the time difference from GMT. Example: ‘+9’
- skin: Selects the clock design. Specify with a number. Please refer to the official documentation for available skins.
Date Display Options
- date: Whether to display the date. Specify true or false.
- dateformat: Sets the date format. Example: ‘YYYY/MM/DD’. Moment.js format can be used.
Time Format Options
- timeformat: Specifies the time format. For example, ‘HH:mm:ss’ for 24-hour format, or ‘hh:mm:ss A’ for 12-hour format.
- angle: Sets the angle of the analog clock. The default is 0 degrees.
Demo Page Showing Time from Around the World Using jClocksGMT.js
A working demo page is also available, so please take a look.
Demo page displaying world clocks using jClocksGMT.js
Source: jClocksGMT
Summary
By using jClocksGMT.js, you can easily display clocks showing the time of various countries.
With basic knowledge of CSS, HTML, and JavaScript, anyone can set it up.
Feel free to use this plugin to add world clocks to your web pages.
※If you reuse this content, please do so at your own responsibility.
Also, do not reuse the Google Analytics tag inside the <head> of the demo page.
