Presented by Nishishi via Movable Type. Last Updated: 2016/10/14. 13:32:46.

現在時刻をテキストでリアルタイムに表示し続ける時計を作る

JavaScriptを使えば、現在の日付や時刻が得られます。一定間隔ごとに特定の処理を自動実行する方法は、記事「経過時間(秒数)をリアルタイムに表示する」で書きました。
これを使えば、現在時刻をテキストでリアルタイムに表示し続けるデジタル時計を作ることも簡単にできます。
例えば、以下のように。(※以下は、表示桁数の調整前)

※ここに時計が表示されます。

上記のサンプルは、ページ(スクリプト部分)が読み込まれると同時に、1秒毎に現在時刻を表示(更新)し続けます。
つまり、「リアルタイムに表示し続ける時計」になるわけです。

ここでやっていることは、

  1. 現在時刻を格納するDateオブジェクトを作成
  2. Dateオブジェクトから「時」・「分」・「秒」を取り出し
  3. 時計として表示する文字列を作成
  4. 描画用の領域にある文字列を書き換え
  5. 上記1~4を、1秒毎に繰り返す。

という処理です。
ほんの数行のJavaScriptソースで作れる簡単なものです。
上記のサンプルだと、時・分・秒ともに、そのときの時刻によって表示桁数が1~2桁で変化します。デジタル時計としては「 1:2:3 」ではなく「 01:02:03 」のように常時2桁で表示させたいですよね。その辺の処理も加えると、もうちょっと長くなりますが、いずれにしても簡単に作れます。

現在時刻を得て表示する方法

まずは、現在時刻を得てからウェブページ上に表示する処理を作ってみます。
とりあえず先に、以下のようにp要素を記述して、時計を描画する領域を確保しておきます。

<p id="RealtimeClockArea">※ここに時計が表示されます。</p>

スクリプトは、以下のように記述します。

var nowTime = new Date(); // 現在日時を得る
var nowHour = nowTime.getHours(); // 時を抜き出す
var nowMin = nowTime.getMinutes(); // 分を抜き出す
var nowSec = nowTime.getSeconds(); // 秒を抜き出す
var msg = "現在時刻は、" + nowHour + ":" + nowMin + ":" + nowSec + " です。";
document.getElementById("RealtimeClockArea").innerHTML = msg;

やっていることはとても簡単ですよね。1行目から順に内容を説明すると、

  1. Dateオブジェクトを生成(=現在日時が変数nowTimeに入る)
  2. getHoursメソッドを使って、Dateオブジェクトから「時」を抜き出す(=変数nowHourに時の値が入る)
  3. getMinutesメソッドを使って、Dateオブジェクトから「分」を抜き出す(=変数nowMinに分の値が入る)
  4. getSecondsメソッドを使って、Dateオブジェクトから「秒」を抜き出す(=変数nowSecに秒の値が入る)
  5. 時計表示用の文字列を作成して、変数msgに格納
  6. id名「RealtimeClockArea」を指定した領域に掲載(書き換え)

……となります。
この処理を、一定時間毎(1秒毎)に実行すれば良いわけです。

1秒毎に特定の処理(関数)を実行する方法

1秒毎に特定の処理を実行するには、記事「経過時間(秒数)をリアルタイムに表示する」に書いた通り、setIntervalメソッドを使います。詳しい説明はそちらの記事で書いているので、必要であれば別途ご参照下さい。
例えば、先の「現在時刻を得て表示する」という一連の処理をshowClock1という関数名で関数にしたとすると、これを1秒毎に繰り返し実行するには、以下のように記述します。

setInterval('showClock1()',1000);

たったこれだけです。
時計の表示を停止する必要があるのなら、もうちょっと記述が必要ですが、ページの表示を終える(=他のページへ移動したりブラウザを閉じたりする)までずっと継続し続けるのであれば、上記のように記述するだけで十分です。

1秒毎に描画を更新して、リアルタイムに表示し続けるデジタル時計を作る

さて、これまでにご紹介した内容を組み合わせると、「リアルタイムに現在時刻を表示し続けるデジタル時計」ができあがります。
JavaScriptソースをまとめると、以下のようになります。

<p id="RealtimeClockArea">※ここに時計が表示されます。</p>
<script type="text/javascript">
function showClock1() {
   var nowTime = new Date();
   var nowHour = nowTime.getHours();
   var nowMin = nowTime.getMinutes();
   var nowSec = nowTime.getSeconds();
   var msg = "現在時刻は、" + nowHour + ":" + nowMin + ":" + nowSec + " です。";
   document.getElementById("RealtimeClockArea").innerHTML = msg;
}
setInterval('showClock1()',1000);
</script>

JavaScriptの中身部分は9行程度ですから、とても簡単ですよね。
上記では、分かりやすいように変数をたくさん使っていますが、もっと短く書くことも可能です。(ここではその説明は割愛しますが。^^;)

ところで、先も述べた通り、上記の例だと、そのときの時刻によって表示桁数が1~2桁で変化します。例えば、1時2分3秒のとき、デジタル時計としては「 1:2:3 」ではなく「 01:02:03 」のように常時2桁で表示させたいですよね。
以下では、桁数を常に2桁にする処理も加えています。

<p id="RealtimeClockArea2">※ここに時計(2桁固定版)が表示されます。</p>
<script type="text/javascript">
function set2fig(num) {
   // 桁数が1桁だったら先頭に0を加えて2桁に調整する
   var ret;
   if( num < 10 ) { ret = "0" + num; }
   else { ret = num; }
   return ret;
}

function showClock2() {
   var nowTime = new Date();
   var nowHour = set2fig( nowTime.getHours() );
   var nowMin = set2fig( nowTime.getMinutes() );
   var nowSec = set2fig( nowTime.getSeconds() );
   var msg = "現在時刻は、" + nowHour + ":" + nowMin + ":" + nowSec + " です。";
   document.getElementById("RealtimeClockArea2").innerHTML = msg;
}
setInterval('showClock2()',1000);
</script>

引数として指定された数値が1桁(=10未満)だったら、頭に「0」を加えて2桁の文字列にして返す関数「set2fig」を追加しています。
これを実際に表示すると、以下のようになります。

※ここに時計(2桁固定版)が表示されます。

これで、表示桁数が「時」・「分」・「秒」ともに2桁に固定された、デジタル時計らしい表示になりました。

JavaScript TIPS 主要なカテゴリ

現在、以下のカテゴリに区分してTIPSを公開しています。

  • イベント : JavaScriptを実行するトリガーとなるイベントに関するTIPS
  • 入力フォーム : JavaScriptで入力フォームを扱う方法に関するTIPS
  • 情報取得 : JavaScriptで様々な情報を得る方法に関するTIPS
  • 操作・移動 : JavaScriptでブラウザを操作したり表示ページを移動したりする方法に関するTIPS
  • 日付・時刻 : JavaScriptで日付や時刻を扱う方法に関するTIPS
  • 機能 : JavaScriptで何らかの機能を実現する方法に関するTIPS
  • 装飾・内容変更 : JavaScriptで装飾や内容を変更する方法に関するTIPS
  • 計算・変換 : JavaScriptで様々な計算や変換処理を行う方法に関するTIPS

▲各カテゴリ毎に、TIPSのタイトルと概要を一覧できます。ぜひ、いろいろ覗いてみて下さい!

関連書籍・関連ソフトなど