現在時刻を表示し毎秒ごとに更新してくれるコードを書きましたので紹介します。
時計のようなアプリを作成する場合に利用してみてください。
- デモ
- 設置方法
- 表示できる内容一覧
- 参考サイト
１．デモ
２．設置方法
(1) ダウンロード
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>現在時間（時刻、分、秒）を表示する例
::</div>上記の場合ブラウザでは「08:13:46」のように表示されます。
３．表示できる内容一覧
表示項目 クラス名 表示例 西暦 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 ３．参考サイト
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Date