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

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

１．デモ

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

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

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

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

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

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

<div id="clock">
 <span class="cl-second">（ここに秒数が表示されます）</span>
</div>

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

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