- 締切済み
JS初心者です。このコードの式を教えてください
下記はストップウォッチのコードとなります 「startTime = startTime + (new Date()).getTime() - stopTime;」 ここの式の意味がわかりません。 startTimeは 「if (!startTime) { startTime = (new Date()).getTime(); }」 の部分で、０秒にセットされている？と思います。 ですのでストップウォッチをスタートした1秒後にストップを作動させ、再度スタートさせるときの時間は 「startTime = startTime + (new Date()).getTime() - stopTime;」つまり 「startTime = ０秒 + (new Date()).getTime() - 1秒;」 と言い換えられると思います。単純に考えて1秒でストップさせてスタートする時刻も1秒目からですので、自ずと(new Date()).getTime()の中身は２秒になっちゃうと思っているのですが、どこからそのような数字がくるんだよということで絶対に違うと思います。 色々とわかりません。どなたかこの式を教えてください！ <!DOCTYPE html> <html lang="ja"> <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!" id="run"> <input type="button" value="Stop!" id="stop"> <input type="button" value="Reset!" id="reset"> <script> (function(){ var startTime, stopTime, running = false, timerId; document.getElementById('run').onclick = function(){ run(); } document.getElementById('stop').onclick = function(){ stop(); } document.getElementById('reset').onclick = function(){ reset(); } 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); stopTime = (new Date()).getTime(); } function reset() { if(running) return; startTime = undefined; document.getElementById('sec').innerHTML = '0.00'; } }()); </script> </body> </html>
- awakewalker
- お礼率53% (52/98)
- JavaScript
- 回答数1
- ありがとう数0
- みんなの回答 （1）
- 専門家の回答
みんなの回答
- t_ohta
- ベストアンサー率38% (5253/13739)
startTime にはrunボタンを押した時刻が入ります。 stopTime にはstopボタンを押した時刻が入ります。 1:00:00 にrunを押したとします。 続いて 1:00:05 にstopを押したとします。 この時、経過時刻として 5秒 が表示されます。 リセットせずに 1:00:12 にrunを押したとします。 1:00:17 の時点で経過時刻には 10秒 が表示されている事が期待されます。 表示ロジックは現在時刻から startTime を引いた時間を表示していますので、1:00:17 の時点で経過時刻 10秒 にするためには startTime は 1:00:07 でなければいけません。 ご質問の計算式は stopTime に何らかの値が入っているときに実行されるようになっているので、2回目のrunボタンを押した時に実行されるロジックです。 式は ＞ startTime = startTime + (new Date()).getTime() - stopTime; ですから、新たな startTime には、元々のstartTime ＋ 現在時刻 － stopTime の結果を入れることになります。 ＞ startTime = 1:00:00 + 1:00:12 - 1:00:05; なので、新しいstartTimeは 1:00:07 になります。
