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

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

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

1.デモ

デモページはこちら >

2.設置方法

(1) ダウンロード

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

jquery.clock.js on GitHub

(2) jQueryの読み込み

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

https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js

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

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

http://jquery.clock.js

(4) 表示

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

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

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

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

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

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

3.表示できる内容一覧

表示項目クラス名表示例
西暦year2016
monthJan
月(省略なし)month-fullJanuary
月(数字)month-num1
date14
曜日dayFri
曜日(省略なし)day-fullFriday
曜日(漢字)day-ja
時刻hour14
minute05
second55

4.参考サイト

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