</head> <body> <div class="container"> <h1 class="title">StopWatch</h1> <h1 id="timerLabel">00:00:00</h1> <input type="button" class="myButton" onclick="start()" value="START" id="startBtn"> <input type="button" class="myButton" onclick="stop()" value="STOP"> <input type="button" class="myButton" onclick="reset()" value="RESET"> </div> <script> var status = 0; // 0:停止中 1:動作中 var time = 0; var startBtn = document.getElementById("startBtn"); var timerLabel = document.getElementById('timerLabel'); // STARTボタン function start(){ status = 0; status = 1; // スタートボタンを押せないようにする startBtn.disabled = true; timer(); } // STOPボタン function stop(){ // 停止中にする status = 0; // スタートボタンを押せるようにする startBtn.disabled = false; } // RESETボタン function reset(){ // 停止中にする status = 0; // タイムを0に戻す time = 0; // タイマーラベルをリセット timerLabel.innerHTML = '00:00:00'; // スタートボタンを押せるようにする startBtn.disabled = false; }<title>ストップウォッチ</title> <style> /* ここにCSSを書いていきます。 */ </style>
</script> </body>function timer(){ // ステータスが動作中の場合のみ実行 if (status == 1) { setTimeout(function() { time++; // 分・秒・ミリ秒を計算 var min = Math.floor(time/100/60); var sec = Math.floor(time/100); var mSec = time % 100; var min = Math.floor(time/1000); var sec = Math.floor(time/100-time/1000); var mSec = time%100; // 分が1桁の場合は、先頭に0をつける if (min < 10) min = "0" + min; // 秒が60秒以上の場合 例)89秒→29秒にする if (sec >= 60) sec = sec % 60; // 秒が1桁の場合は、先頭に0をつける if (sec < 10) sec = "0" + sec; // ミリ秒が1桁の場合は、先頭に0をつける if (mSec < 10) mSec = "0" + mSec; // タイマーラベルを更新 timerLabel.innerHTML = min + ":" + sec + ":" + mSec; // 再びtimer()を呼び出す timer(); }, 10); } }
https://codeforfun.jp/javascript-stopwatch/ からの引用です。
この記述の最後の function timer{}の部分が理解できません。
setTimeout関数 (処理内容、実行タイミング)
↓
ここは10だから10ミリ秒、つまり10分の1秒と考える。
var min = Math.floor(time/100/60);
var sec = Math.floor(time/100);
var mSec = time % 100;
この記述を自分が分かりやすいように以下のように変えてみました。
var min = Math.floor(time/1000); ←/1000で分が出ると考えました
var sec = Math.floor(time/100-time/1000);
var mSec = time; ←10分の1秒
何分何秒まではちゃんと表示されますが、最後の10分の1秒が出ません。
すると最後の10分の1秒の部分の表示がおかしくなりました。
どこに問題があるのでしょうか?
ご指摘いただければありがたいです。よろしくお願いします。
回答1件
あなたの回答
tips
プレビュー