経過時間(秒数)をリアルタイムに表示する方法

JavaScriptには、一定時間ごとに何らかの処理を実行させるタイマー機能があります。これを使えば、「ボタンをクリックしてからの経過時間」とか「ページを表示してからの経過時間」をリアルタイムに表示することもできます。
下記のサンプルでは、ボタンをクリックしてからの経過秒数をリアルタイム(1秒間隔)で表示します。

ここでは「ボタンのクリック」をトリガーにしてカウントを開始していますが、「ページの読み込み完了」と同時に実行するようにすれば、「ページの閲覧秒数」をカウントすることもできるでしょう。

一定時間ごとに処理を繰り返すタイマー機能「setInterval」

JavaScriptで一定時間ごとに何らかの処理を実行させるには、setIntervalメソッドを使います。記述方法は以下の通りです。

タイマーID名 = setInterval('実行する内容',実行間隔);

実行間隔は整数で指定します。数値の単位は「ミリ秒」として解釈されますから、1秒ごとに処理を行いたければ「1000」を指定します。
setIntervalメソッドで開始した「繰り返し処理」を止めるには、clearIntervalメソッドを使います。記述方法は以下の通りです。

clearInterval( タイマーID名 );

具体的には、以下のような感じで記述すれば良いでしょう。

// 繰り返し処理の開始
function startShowing() {
   PassageID = setInterval('showPassage()',1000);
}
// 繰り返し処理の中止
function stopShowing() {
   clearInterval( PassageID );
}
// 繰り返し処理の中身
function showPassage() {
   ～ 何らかの処理 ～
}

繰り返し処理を開始したいときに「startShowing関数」を呼び出し、繰り返し処理を終了するときに「stopShowing関数」を呼び出して使います。
startShowing関数の中では、setIntervalメソッドを使って、

• 1000ミリ秒(＝1秒)ごとに
• showPassage関数を呼び出す

という処理を行うようタイマーをセットしています。
例えばこのように、「開始用」・「終了用」・「繰り返し処理用」の3つの関数を用意して利用します(※関数名は何でも構いません)。
開始用関数・終了用関数をどこで呼び出すかは自由にできます。冒頭の例では、ボタン(input要素で作ったボタン)のonclick属性を使って呼び出しました。
body要素のonloadイベントを使えば、ページの読み込み完了と同時に開始することもできます。ページの読み込み完了と同時に何かを実行する方法については、別途「ページの読み込み前・直後・完了時にスクリプトを実行する方法いろいろ」などをご参照下さい。

ボタンを押してからの経過秒数を表示するHTML＋JavaScriptソース

冒頭の例のように、ボタンが押されてからの経過秒数をリアルタイムに表示するには、以下のようなソースを記述します。
まず、JavaScriptで関数を3つ作ります。

var PassSec;   // 秒数カウント用変数

// 繰り返し処理の中身
function showPassage() {
   PassSec++;   // カウントアップ
   var msg = "ボタンを押してから " + PassSec + "秒が経過しました。";   // 表示文作成
   document.getElementById("PassageArea").innerHTML = msg;   // 表示更新
}

// 繰り返し処理の開始
function startShowing() {
   PassSec = 0;   // カウンタのリセット
   PassageID = setInterval('showPassage()',1000);   // タイマーをセット(1000ms間隔)
   document.getElementById("startcount").disabled = true;   // 開始ボタンの無効化
}

// 繰り返し処理の中止
function stopShowing() {
   clearInterval( PassageID );   // タイマーのクリア
   document.getElementById("startcount").disabled = false;   // 開始ボタンの有効化
}

次に、上記の関数を実行するボタンをHTMLで作成します。

<p>
   <input type="button" value="カウント開始" id="startcount" onclick="startShowing();">
   <input type="button" value="カウント停止" id="endcount" onclick="stopShowing();">
</p>
<p id="PassageArea">(ここにカウントが表示されます)</p>

最後のHTML部分では、input要素を2つ用意して、開始ボタンと終了ボタンを作っています。
さらに、経過秒数の表示用として「PassageArea」というid名を割り振ったp要素を1つ用意しています。
経過秒数のカウントは、単純に「秒数カウント用変数(PassSec)」に1ずつ加算していく方法を使っています。
setIntervalメソッドを使って、1000ミリ秒(＝1秒)ごとに実行されるよう指定しているので、1秒ごとに1が加算されるため、秒数が得られるわけです。

備考：正確ではないかも知れない

……が、この方法はあんまり正確な時間は出ないかも知れません。ブラウザが他に重たい処理を実行していたり、CPU使用率が高くてブラウザがスクリプトを時間通りに動かせない場合には、カウントが遅れるかも知れませんから。
正確な経過時間を出したい場合は、「現在時刻」から「開始時刻」を引くという計算で経過秒数を得た方が良いでしょう。
ここでは、書くのが面倒だったのでソースをシンプルにするため(^_^;)上記のようにしました。

JavaScriptで時刻を扱う方法は、「日付・時刻カテゴリ」の記事などをご参照下さい。
また、上記ではタイマーが開始された以後、停止されるまで「開始ボタン」を押せなくしています。この方法については、「1度しか押せないボタンを作る方法」も参照して下さい。

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