時間を計る（時刻表示）

赤字：JavaScriptの命令や重要なタグ／青字：用途に応じて変更する部分／緑字：変更可能な変数名やユーザー関数名

実例

例文

<form name="form_count"><input name="counter" type="text" size="10"></form>

<script type="text/javascript">
<!--
count = 0;
timerID = setInterval('countup()',1000);

function countup() {
	count++;
	document.form_count.counter.value =count_format(count,0); //書式を整えて表示
}

function count_format(sec,fix) {
	//sec=秒数 fix=小数桁数
	var ts = sec.toFixed(fix); //小数点以下の調整 (*1)
	var tm = Math.floor(ts / 60); //秒数切り捨て (*2)
	ts = ts % 60; //60秒未満の秒数 (*3)
	var th = Math.floor(tm / 60); //分の切り捨て (*4)
	tm = tm % 60; //60分未満の分数 (*5)
	//表示の整形 (*6)
	if (ts < 10) ts = "0" + ts;
	if (tm < 10) tm = "0" + tm;
	if (th < 10) th = "0" + th;
	return th + ":" + tm + ":" + ts; //文字列を返す (*7)  
}
-->
</script>

解説

1秒毎にカウントしたタイマーを時間の書式に設定してから出力します。
秒数をそのまま表示したのでは数値が大きくなると判りにくくなるため、何時間何分何秒という分かりやすい書式に整えます。

ユーザー関数countupの2行目で、書式を整えるユーザー関数count_formatを適用してから出力しています。

ユーザー関数count_formatは、小数点以下のある秒数を処理出来るように考えてあります。日付関数を使った場合、1/1000秒単位でタイマーが動作するため、小数点以下第3位まで対応できるようにしてあるのです。
引数は２つ。変数secに秒数、変数fixで小数点以下で揃えたい桁数を値として受け取ります。
今回の変数countに小数点以下はありませんが。変数fixで「0」を受け取って、小数点以下を切り捨てる処理になっています。

(*1) 変数tsには、小数点以下を変数fixで指定された桁数に調整した秒数が入ります。
(*2) 変数tsを60で割ると、分数になりますので、これを変数tmに入れます。小数を切り捨てているため、60秒未満の秒数はなくなっています。
(*3) (*2)でなくなった60秒未満の秒数を算出し、変数tsに入れています。ここでは60で割った余りを計算して、変数tsを入れ替えていますので、(*2)の行との順番は重要です。
(*4) 変数tmには分数が入っていますので、(*2)と同様の手順で時間を変数thに取り出します。
(*5) 変数tmから時間未満の分数だけを算出して、変数tmを入れ替えます。
(*6) 以下の三行で10未満の数値に対して「0」を頭に付け加えています。ここでは変数の中身は文字列になっています。例えば、「5」という数値なら、「05」という文字列に変換されます。
(*7) ３つの変数に時間を表す記号をつなげて、書式を整えて、これを戻り値としています。

戻り値はユーザー関数を呼び出した位置に適用されます。

応用 - 日本語表記

戻り値となる書式を日本語に変更する場合まずこのように入れ替えます。

return th + "時間" + tm + "分" + ts + "秒"; // (*7)

戻り値は「○時○分○秒」という書式になります。
ただし、0分や0秒のときも表示されます。常に桁数を揃えるためには良いのですが、必要のない場合もあります。

必要な値のある時間だけを表示したい場合は戻り値を次のようにします。

var s = "";
if (th > 0) s += th + "時間";
if (tm > 0) s += tm + "分";
if (ts > 0) s += ts + "秒";
return s;

こうすると変数が0の場合は出力されませんので、「○時間○分」とか「○分○秒」「○時間○秒」という短縮された書式が現れます。

応用 - 0.1秒単位

0.1秒単位で時間を表示する場合、タイマーも0.1秒単位で動作させる必要があります。
また、このとき変数countも0.1秒単位になっていることに注意が必要です。
変更箇所を赤字にします。

<script type="text/javascript">
<!--
count = 0;
timerID = setInterval('countup()',100);

function countup() {
	count++;
	document.form_count.counter.value =count_format(count/10,1); //書式を整えて表示
}

function count_format(sec,fix) {
（省略）
}
-->
</script>

戻る