Q&A
Closed
javascriptでストップウォッチをつくっているが、経過時間がもどってしまう。
言語名 javascript
ソースコードを入力
elapsedTime = Date.now() - startTime;
(経過時間) (スタートボタンを押した時間)
ここに問題・エラーに対して試したことを記載してください。
二回目以降のストップからのスタートでなぜか秒数がもどってしまいます。
解決方法はわかるのですが、なぜもどってしまうのかがわかりません。
よろしければ、教えてください。よろしくお願いします。
全体のソースを掲載できますか？
@ayasaka
Questioner
今回のように繰り返しcountUpを呼ぶのなら、setTimeoutよりsetIntervalの方が良いと思います。
そうするとclearTimeoutではなくclearIntervalを呼ぶことになる。
elapsedTime = Date.now() - startTime;
なので、
let elapsedTime = 0;
...
elapsedTime += Date.now() - startTime;
は必要ないような気がします。そうなると
let d = new Date(Date.now() - startTime + elapsedTime).getTime();
は
let d = new Date(Date.now() - startTime).getTime();
@ayasaka
Questioner
経過時間がもどってしまう
停止したあと再び開始した場合に、止めた時間からの続きではなく00:00:00からの再計測になってしまう、ということですよね。
開始を押した際にはstartTimeにDate.now()を足し、停止時にはstartTimeからDate.now()を引くようにすると、elapsedTimeを別に持つ必要が無くなって処理が簡略化できるかな、と思います。
<p class='timer'></p>
<button class='start'>開始</button>
<button class='stop'>停止</button>
<button class='reset'>リセット</button>
<script>
'use strict';
{
const el = {};
let startTime = 0;
window.addEventListener('DOMContentLoaded', () => {
el.timer = document.querySelector('.timer');
el.start = document.querySelector('.start');
el.stop = document.querySelector('.stop');
el.reset = document.querySelector('.reset');
el.timer.textContent = getFormat(0);
setButtonStatus();
window.addEventListener('click', e => {
const cl = e.target.classList;
const now = Date.now();
if(cl.contains('start')) {
startTime += now;
printTime();
setButtonStatus();
}
else if(cl.contains('stop')) {
startTime -= now;
setButtonStatus();
}
else if(cl.contains('reset')) {
startTime = 0;
el.timer.textContent = getFormat(0);
}
});
});
const printTime = () => {
if(startTime > 0) {
el.timer.textContent = getFormat(Date.now() - startTime);
requestAnimationFrame(printTime);
}
};
const getFormat = t => new Date(t).toJSON().slice(11, 22);
const setButtonStatus = () => {
const f = startTime > 0;
el.start.disabled = el.reset.disabled = f;
el.stop.disabled = !f;
};
}
</script>
@ayasaka
Questioner