にしし ふぁくとりー:西村文宏 個人サイト

"JavaScript Tips Factory" : Presented by Nishishi. Since 1997.

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

JavaScriptを使えば、現在時刻をテキストでリアルタイムに表示し続けるデジタル時計をウェブページ上に作ることも簡単にできます。現在時刻を得て、ページ上の文字列を書き換える処理を、1秒毎に自動実行するよう記述すれば良いだけです。

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

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

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

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

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

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

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

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

HTMLソース

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

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

JavaScriptソース

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ソースをまとめると、以下のようになります。

HTMLソース

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

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

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

HTMLソース

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

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

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

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

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

()

JavaScript TIPSふぁくとりーの主要なカテゴリ

下記のカテゴリに区分して、JavaScriptに関するTIPSを公開しています。カッコ内の数字は、該当する記事の件数です。

著者紹介


にしし(西村文宏)

にししでございます。本書いたり記事書いたりしてます。あと萌えたり。著書5冊発売中です(Web製作系4冊+小説1冊)。著書や記事は「西村文宏」名義。記事は主にAll Aboutで連載。本の最新刊は2011年3月に発売されたライトノベルでございますよ。

Twitter:にしし/西村文宏
にしし/西村文宏 on facebook にしし/西村文宏 on mixi フォローはお気軽に!

にしし(西村文宏)連絡先
☕ コーヒーをおごる

著書一覧と詳細

関連するかもしれない情報など

▼このページに関連しそうな記事が約8本くらい自動表示されています。(たぶん)

--- 当サイト内を検索 ---