Date、padStartメソッドを使用してクロックを作成

デフォルトのDateメソッドを組み込み

new Date()
// Wed Dec 08 2021 17:16:18 GMT+0900 (한국 표준시)
// 현재 날짜를 가져옴

Dateに関する方法がたくさんあります(getDate、getDay、getFullYear...)
コンソールウィンドウで検索しましょう

const date = new Date()
//undefined
//현재 시간을 date 라는 변수에 할당

date.getDate()
//8
date.getDay()
//3 ( 수요일 )
date.getFullYear()
//2021
date.getHours()
//17
date.getMinutes()
//18
date.getSeconds()
//3

毎秒getHours、getMinutes、getSecondsを呼び出し、現在の時間を解放すればいいですか?

new Date().getHours()
//17
new Date().getMinutes()
//22
new Date().getSeconds()
//32

前述したsetIntervalとsetTimeoutの使用方法について
setIntervalで毎秒上の3種類を呼び出しますか?
そうだ.

const clock = document.querySelector("h2#clock");

function getClock() {
  const date = new Date();
  console.log(`${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`);
}

setInterval(getClock, 1000);

これにより、毎秒コンソールに時間がかかります.

そうですか.
でもリフレッシュすると1秒後に計時開始
すぐに皆さんに時間を見せたいなら

getClock();
setInterval(getClock, 1000);

先ほど作成した時間を表示するgetClock()関数を追加すれば、この問題を解決できます.
画面に出たいなら.

const clock = document.querySelector("h2#clock");

function getClock() {
  const date = new Date();
  clock.innerText = `${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`;
}
getClock();
setInterval(getClock, 1000);

もしあなたがやったら、HTMLで時間が流れているのが見えます.はい.
しかし秒の単位は0304ではなく3 4です.
解決するなら?

padStart

必要な文字列が最小数を満たさない場合は、指定した文字列を挿入できます.
2桁の文字列がほしい場合、表示される文字列は1つですか?
文字列「3」の長さが2でない場合、前に「0」を付けますか?"3".padStart(2, "0")こうすればいい
もちろん、長さが2以上であれば、「0」では埋められません.
逆にpadEndもあります.
とにかく.
前に設定した変数は少し変更します.

const clock = document.querySelector("h2#clock");

function getClock() {
  const date = new Date();
  const hours = String(date.getHours()).padStart(2, "0");
  const minutes = String(date.getMinutes()).padStart(2, "0");
  const seconds = String(date.getSeconds()).padStart(2, "0");
 	// padStart메서드는 문자열을 상대하기 때문에
  	// String()으로 감싸준다 : 숫자를 문자열로 바꿔주는 내장함수

  clock.innerText = `${hours}:${minutes}:${seconds}`;
}

getClock();
setInterval(getClock, 1000);