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

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引数は指定時間後に自動実行される関数、第2引数は指定時間をミリ秒で表した数値です。値が「1000」なら意味は「1000ミリ秒」なので、つまり「1秒」ということです。
時計の表示を停止する必要があるのなら、もうちょっと記述が必要ですが、ページの表示を終える(＝他のページへ移動したりブラウザを閉じたりする)までずっと継続し続けるのであれば、上記のように記述するだけで十分です。

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

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

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

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);

JavaScriptの中身部分は9行程度ですから、とても簡単ですよね。
上記では、分かりやすいように変数をたくさん使っていますが、もっと短く書くことも可能です。(ここではその説明は割愛しますが。^^;)
ところで、先も述べた通り、上記の例だと、そのときの時刻によって表示桁数が1～2桁で変化します。例えば、1時2分3秒のとき、デジタル時計としては「 1:2:3 」ではなく「 01:02:03 」のように常時2桁で表示させたいですよね。
以下では、桁数を常に2桁にする処理も加えています。

<p id="RealtimeClockArea2">※ここに時計(2桁固定版)が表示されます。</p>

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);

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

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

(更新日：2017年06月15日)