javascriptのストップウオッチのコード

解決済

質問者：montamisa
質問日時：2014/12/08 23:24
回答数：1件

javascript初級勉強中です。
以下のコードを実行すると(1)小数点第２の動きがおかしい。
　(2)一度リセットボタンを押さないとタイマーが動かない。
という２点の不具合が出ます。

　　どうすれば解決するでしょうか？

<!DOCTYPE HTML>
<head>
<meta charset="utf-8">
<title>ストップウォッチ</title>
</head>
<body>
<h1>ストップウオッチ</h1>
<div id="sec" style="font-size:128px">0.00</div>
<input type="button" value="Start!" onclick="run();">
<input type="button" value="Stop!" onclick="stop();">
<input type="button" value="Reset!" onclick="reset();">
<script>

var statTime,
stopTime,
running = false,
timerId;

function run() {

if (running)return;

running = true;

if (stopTime) {
startTime = startTime + (new Date()).getTime() - stopTime;
}
if (! startTime) {
startTime = (new Date()).getTime();
}
timer(); //タイマー処理回していく
}
function timer() {
document.getElementById('sec').innerHTML = (((new Date()).getTime()- startTime)/1000). toFixed(2);
timerId =setTimeout(function() { timer(); //このタイマー自身を回していく
}, 100);

}
function stop() {
if (!running) return false;
running = false;
clearTimeout(timerId); //timerIdを渡して止める
stopTime = (new Date()).getTime();
}

function reset() {
if (running) return;
　　startTime = undefined;
document.getElementById('sec').innerHTML = '0.00';
}

</script>

</body>
</html>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (1件)

No.1ベストアンサー

回答者： fujillin
回答日時：2014/12/09 09:46

こんにちは。

＞(1)小数点第２の動きがおかしい。
少数2位（＝1/100秒）を表示するのに、計算の頻度を100msec（＝1/10秒）で行っているので、第2位の数値は成ゆきになります。
最小単位と同等（できれば半分）くらいの頻度で計算を行いたいところですが、5msecでは負荷が多すぎるかもしれませんね。
実際の表示はほとんど読み取れないので、10msecくらいがいいところでしょうか。
(setTimeoutやsetIntervalの時間間隔は必ずしも正確ではありません）

＞(2)一度リセットボタンを押さないとタイマーが動かない。
ところどころで変数などを表示させてチェックするか、ブラウザ組み込みのデバッグツールを利用なさると良いと思います。
　var statTime,　⇒　var startTime,