ストップウォッチで経過時間を表示させるやつ
ドットインストールのストップウォッチを作るコードとほぼ一緒なので省略してます
let startTime; let timeoutId; let elapsedTime = 0; function countUp() { const d = new Date(Date.now() - startTime + elapsedTime); const m = String(d.getMinutes()).padStart(2, '0'); const s = String(d.getSeconds()).padStart(2, '0'); timer.textContent = `${m}:${s}`; timeoutId = setTimeout(() => { countUp(); }, 1000); }
なかなかいい感じ
今回は時分秒を測定したいのでこちらを追加
const h = String(d.getHours()).padStart(2, '0');
追加後
let startTime; let timeoutId; let elapsedTime = 0; function countUp() { const d = new Date(Date.now() - startTime + elapsedTime); const h = String(d.getHours()).padStart(2, '0'); const m = String(d.getMinutes()).padStart(2, '0'); const s = String(d.getSeconds()).padStart(2, '0'); timer.textContent = `${h}:${m}:${s}`; timeoutId = setTimeout(() => { countUp(); }, 1000); }
?????
本題
JavaScript の Date オブジェクトは、単一の瞬間の時刻をプラットフォームに依存しない形式で表します。 Date オブジェクトは協定世界時 (UTC) の1970年1月1日からの経過ミリ秒数を表現する Number の値を含んでいます。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Date
とのことなのでDate.now()で取得できる値は世界協定時(UTC)
一方でgetHours()を見てみると
Date.prototype.getHours()
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Date
地方時に基づき、指定された日時の「時」 (0–23) を返します。
日本の地方時はUTC+9なのでgetHours()で取得すると最初から9時間差が出てしまっていたご様子
DataクラスにはUTCで取得できるgetUTCHours()があるので
let startTime; let timeoutId; let elapsedTime = 0; function countUp() { const d = new Date(Date.now() - startTime + elapsedTime); const h = String(d.getUTCHours()).padStart(2, '0'); const m = String(d.getMinutes()).padStart(2, '0'); const s = String(d.getSeconds()).padStart(2, '0'); timer.textContent = `${h}:${m}:${s}`; timeoutId = setTimeout(() => { countUp(); }, 1000); }
大丈夫そう