個人的勉強メモ置き場

プログラミングど素人のメモ置き場

ストップウォッチで経過時間を表示させるやつ


ドットインストールのストップウォッチを作るコードとほぼ一緒なので省略してます

  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);
  }

f:id:zykb:20210803205910g:plain


なかなかいい感じ
今回は時分秒を測定したいのでこちらを追加

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);
  }


f:id:zykb:20210803210646g:plain

?????

本題

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()
地方時に基づき、指定された日時の「時」 (0–23) を返します。

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Date

日本の地方時は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);
  }

f:id:zykb:20210803212801g:plain

大丈夫そう