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

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

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

JavaScriptには、一定時間ごとに何らかの処理を実行させるタイマー機能があります。経過時間(何かが行われてからの秒数)を表示させる際などに活用できます。setIntervalメソッドで繰り返し処理と実行間隔を指定し、clearIntervalメソッドで終了させます。

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

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


(ここにカウントが表示されます)

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

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

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

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

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

clearInterval( タイマーID名 );

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

JavaScriptソース

// 繰り返し処理の開始
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つ作ります。

JavaScriptソース

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で作成します。

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度しか押せないボタンを作る方法」も参照して下さい。

()

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

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

著者紹介


にしし(西村文宏)

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

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

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

著書一覧と詳細

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

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

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