one's way blog

ワクワクを生み出せるWebエンジニアを目指して。

【10:Stop watch】ストップウォッチ

f:id:seintoseiya:20150507203756p:plain
プロジェクトNo.10:Stop watch
「スタート/ストップ・リセット」ボタンを用意したシンプルなストップウォッチを作成しました。
シンプルですが、よく使いそうな「時間の計測する」という汎用的な機能をjavascriptで処理しています。

今回のポイントは以下の通り。

  • 一定間隔で関数を呼び出す関数|setInterval(), clearInterval()
  • カウントアップ|timeNum++
  • 時間を表示|innerHTML
  • スタート/ストップボタンのvalue切り替え|if
  • 時間フォーマットの整正|ユーザ関数
  • 4つのユーザー関数
    • 画面起動時とリセットボタン押下時に呼び出す関数
    • スタート/ストップボタン押下時に呼び出す関数
    • (0.01秒毎に)カウントアップしていく関数
    • フォーマットを整正する関数

ソースコード

[HTML]

<body>
	<div id="main">
		<h1>StopWatch</h1>
		<div id="left">
		<form name="form_sw">
			<p><input type="button" name="bstart" value="Start" onclick="startCount()"></p>
			<p><input type="button" name="reset" value="Reset" onclick="resetTime()"></p>
		</form>
		</div>
		<div id="right">
			<h2 id="timer"></h2>
		</div>
	</div>
	<script type="text/javascript"><!--
	sw_status = 0; // startとstopのフラグ
	resetTime();
	function resetTime(){
		if (sw_status == 1) {startCount();}
		timeNum = 0; // 時間の初期値
		document.getElementById("timer").innerHTML = count_format(0);
	}
	function startCount(){
		if (sw_status == 0) {
			document.form_sw.bstart.value = "Stop";
			sw_status = 1;
			timerID = setInterval("countUp()",10); // 0.01秒毎に呼び出し
		} else {
			document.form_sw.bstart.value = "Start";
			sw_status = 0;
			clearInterval(timerID); // 呼び出しの停止
		}
	}
	function countUp(){
		timeNum++;
		document.getElementById("timer").innerHTML = count_format(timeNum);
	}
	function count_format(num) {
		var ts = num / 100;
		var tm = Math.floor(ts / 60);
		ts = (ts % 60).toFixed(2);
		var th = Math.floor(tm / 60);
		tm = tm % 60;
		if (ts < 10) ts = "0" + ts;
		if (tm < 10) tm = "0" + tm;
		if (th < 10) th = "0" + th;
	    return th + ":" + tm + ":" + ts;
	}
	// --></script>
</body>

一定間隔で関数を呼び出す関数|setInterval(), clearInterval()

setInterval関数は2つの引数が必要で、1つは対象の呼び出すユーザー関数、もう1つは呼び出し間隔を指定します。
ちなみに「1000」=1秒を表しますので、今回は「10」=0.01秒を使用しました。
また、戻り値(識別値)が用意されており、これをclearInterval関数を使ってクリアすることで呼び出しは停止します。

[Javascript]

0.01秒毎に呼び出し

timerID = setInterval("countUp()",10); 

呼び出しの停止

clearInterval(timerID); 

「0:0:0」から「00:00:00」に整形

何もしなければカウントアップしたtimeNumは、1〜9秒の時に1桁で表示されます。
01,02,03...と表示したいのであれば、別の処理が必要です。
といっても10以下の場合は頭に0を付与しているだけです。

[Javascript]

if (ts < 10) ts = "0" + ts;
if (tm < 10) tm = "0" + tm;
if (th < 10) th = "0" + th;

※ts=秒、tm=分、th=時間

常に小数点以下を表示する|toFixed()

初期時間の「00:00:00.00」の時に何も処理しなければ「00:00:00」となります。
これを防ぐために常に小数点以下を表示するtoFixed関数を使います。引数は小数点の何位まで表示するかを指定します。

[Javascript]

小数点第2位まで表示

ts = (ts % 60).toFixed(2);

全ソースはこちら

github.com

関連アプリ・書籍

JavaScript本格入門 ?モダンスタイルによる基礎からAjax・jQueryまで

JavaScript本格入門 ?モダンスタイルによる基礎からAjax・jQueryまで

JavaScript 第6版

JavaScript 第6版

入門者のJavaScript (ブルーバックス)

入門者のJavaScript (ブルーバックス)