現在時刻を表示し毎秒ごとに更新してくれるコードを書きましたので紹介します。
時計のようなアプリを作成する場合に利用してみてください。
- デモ
- 設置方法
- 表示できる内容一覧
- 参考サイト
１．デモ
２．設置方法
(1) ダウンロード
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」のように表示されます。
３．表示できる内容一覧
| 表示項目 | クラス名 | 表示例 |
|---|---|---|
| 西暦 | 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