現在時刻を表示し毎秒ごとに更新してくれるコードを書きましたので紹介します。
時計のようなアプリを作成する場合に利用してみてください。
- デモ
- 設置方法
- 表示できる内容一覧
- 参考サイト
1.デモ
2.設置方法
(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 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.表示できる内容一覧
表示項目 | クラス名 | 表示例 |
---|---|---|
西暦 | 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 |
4.参考サイト
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Date