【10：Stop watch】ストップウォッチ
プロジェクトNo.10：Stop watch
「スタート/ストップ・リセット」ボタンを用意したシンプルなストップウォッチを作成しました。
シンプルですが、よく使いそうな「時間の計測する」という汎用的な機能をjavascriptで処理しています。
今回のポイントは以下の通り。
- 一定間隔で関数を呼び出す関数｜setInterval(), clearInterval()
- カウントアップ｜timeNum++
- 時間を表示｜innerHTML
- スタート/ストップボタンのvalue切り替え｜if
- 時間フォーマットの整正｜ユーザ関数
- ４つのユーザー関数
- 画面起動時とリセットボタン押下時に呼び出す関数
- スタート/ストップボタン押下時に呼び出す関数
- （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関数は２つの引数が必要で、１つは対象の呼び出すユーザー関数、もう１つは呼び出し間隔を指定します。
ちなみに「1000」=1秒を表しますので、今回は「10」=0.01秒を使用しました。
また、戻り値（識別値）が用意されており、これをclearInterval関数を使ってクリアすることで呼び出しは停止します。
0.01秒毎に呼び出し
timerID = setInterval("countUp()",10);
呼び出しの停止
clearInterval(timerID);
「0:0:0」から「00:00:00」に整形
何もしなければカウントアップしたtimeNumは、１〜９秒の時に1桁で表示されます。
01,02,03...と表示したいのであれば、別の処理が必要です。
といっても10以下の場合は頭に0を付与しているだけです。
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関数を使います。引数は小数点の何位まで表示するかを指定します。
小数点第2位まで表示
ts = (ts % 60).toFixed(2);
