クロックの作成

setInterval()

interval:「毎回」起こるべきこと
2秒ごとの間隔:2秒ごとに何が起こるか
ex)

function sayHello(){
		console.log("hello");}

setInterval(sayHello, 5000);

setInterval(a,b)
a=実行する関数
b=呼び出しの関数間隔を何ミリ秒(ミリ秒)書き出せばよいか.
5000ms = 5s

setTimeout()

setTimeout(sayHello, 5000);

上記のコードは、5秒後にsayHelloを実行することを意味します.

Date object

コンソールにnew Date()を入力すると、今日の日付情報が得られます.
コンソール内

const date = new Date()
date.getDate()
date.getDay()
date.getHours()
date.getFullYear()

などいろいろな価格があります.

現在の時刻を表すクロックの作成

html

<h2 id = "clock"></h2>

js

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

function getClock(){
	const date = newDate();
    clock.innerText =
    `${date.getHours()}:${date.getMinutes()}:${date.getSeconds}`}
    

getClock(); ---->화면에 바로 뜨게 하기 위해 함수 실행시켜준다.
SetInterval(getClck, 1000);

padStart()

stringを2文字で埋めます!
ex) 2 -> 02
この場合padStart()を使用できます.
padStart()はstringに書き込むことができる関数です.
pad = padding
ex)

"1".padStart(2,"0")

2=maxlength、すなわち文字列の長さは2です.
「0」=2文字でない場合は、前列に0を付けます.
ex)

"12".padStart(2,"0") ----> "12"출력됌.

適用-PadEnd()

paddEnd():後にpaddingを追加します.
ex)

"1".padEnd(2,"0") -----> "10" 출력됌.
"hello".padEnd(6,"x") -----> "xhello" 출력됌.

String()

数値を文字列に変換する関数.
注意事項)
Number():文字列->数値
ParseInt():文字列->整数
ParseFloat():文字列->実数

クロックコードの変更

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"); 
    
    clock.innerText = `${hours}:${minutes}:${seconds}
    }