jClocksGMT.jsを使ってグリニッジ標準時から各国の時間を時計で表示する方法｜DAD UNION

jClocksGMT.jsを使ってグリニッジ標準時から各国の時間を時計で表示する方法をご紹介します。

Contents

jClocksGMT.jsを使ってグリニッジ標準時から各国の時間を時計で表示するCSS記述
jClocksGMT.jsを使ってグリニッジ標準時から各国の時間を時計で表示するHTML記述
jClocksGMT.jsを使ってグリニッジ標準時から各国の時間を時計で表示するJavaScriptの記述
jClocksGMT.jsを使ってグリニッジ標準時から各国の時間を時計で表示するデモページ
ソース元：jClocksGMT

jClocksGMT.jsを使ってグリニッジ標準時から各国の時間を時計で表示するCSS記述

※時間を時計で表示するエリア（.jcgmt-container）のCSS記述です。必要に応じて変更して下さい。

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

jClocksGMT.jsを使ってグリニッジ標準時から各国の時間を時計で表示するHTML記述

※グリニッジ標準時から東京の時間を時計で表示するエリアを2パターン「id=”clock_tokyo”」「id=”clock_tokyo2″」を用意しました。

<h1>jClocksGMT.jsを使ってグリニッジ標準時から各国の時間を時計で表示</h1>
<p>以下のは日本の東京時間を時計で表示してます。</p>

<div class="clockarea">
    <div id="clock_tokyo"></div>
    <div id="clock_tokyo2"></div>
</div>

jClocksGMT.jsを使ってグリニッジ標準時から各国の時間を時計で表示するJavaScriptの記述

※jquery.min.js（1.7.2）、jClocksGMT.js、jquery.rotate.jsファイルを読み込みます。$(‘時計表示エリア’).jClocksGMT({オプション})を記述し、オプションは時計タイトル、グリニッジ標準時からの時差、時間表示形式、時計パターン等を設定します。

<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: '東京, 日本',   
            date: true, 
            dateformat: 'YYYY/MM/DD', 
            offset: '+9',
            skin: 4
        });

    });
</script>