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

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

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イベントを使えば、ページの読み込み完了と同時に開始することもできます。

ボタンを押してからの経過秒数を表示するには

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

<script type="text/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; // 開始ボタンの有効化
}
</script>

<!-- ▼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 主要なカテゴリ

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

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

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

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