日時や時刻を表示するJavascript「jquery.clock.js」の紹介

現在時刻を表示し毎秒ごとに更新してくれるコードを書きましたので紹介します。
時計のようなアプリを作成する場合に利用してみてください。

  1. デモ
  2. 設置方法
  3. 表示できる内容一覧
  4. 参考サイト

1.デモ

デモページはこちら >

2.設置方法

(1) ダウンロード

Githubでファイルを公開していますので、こちらよりダウンロードして下さい。

jquery.clock.js on GitHub

(2) jQueryの読み込み

jQuery依存のコードです。jQueryを読み込んでいない場合には、<head>タグ内でjQueryを読み込んでおいて下さい。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>

(3) jquery.clock.jsの読み込み

(1)でダウンロードしたjquery.clock.jsファイルを自分のサイトフォルダに入れ、<head>タグ内で読み込みます。

<script src="jquery.clock.js"></script>

(4) 表示

このコードは、ID名を「clock」と付けたのdiv内で動作するように作られています。
そのdiv内で、例えば「second」というクラス名を付けたタグを用意すると、そのタグ内に現在時刻の秒が表示されます。

現在時刻の秒数を表示する例

<div id="clock">
 <div><span class="second">(ここに秒数が表示されます)</span></div>
</div>

現在時間(時刻、分、秒)を表示する例

<div id="clock">
  <div><span class="hour"></span>:<span class="minute"></span>:<span class="second"></span></div>
</div>

上記の場合ブラウザでは「08:13:46」のように表示されます。

3.表示できる内容一覧

表示項目 クラス名 表示例
西暦 year 2016
month Jan
月(省略なし) month-full January
月(数字) month-num 1
date 14
曜日 day Fri
曜日(省略なし) day-full Friday
曜日(漢字) day-ja
時刻 hour 14
minute 05
second 55

3.参考サイト

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Date