Clock 만들기

setInterval()

interval : "매번" 일어나야 하는 무언가
ex) 매 2초 interval : 매 2초마다 무슨 일이 일어난다

ex)

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

setInterval(sayHello, 5000);

setInterval(a,b)
a = 실행시키고자 하는 function
b = 호출되는 function 간격을 몇 ms(milli seconds)로 할 지 쓰면 된다.
5000ms = 5s

setTimeout()

setTimeout(sayHello, 5000);

위 코드는 5초 뒤에 sayHello를 한 번 실행한다는 의미.

Date object

console에 new Date()를 입력하면 오늘 날짜 정보를 얻을 수 있다.

console 내에

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

등 다양한 값을 얻을 수 있다.

현 시간 나타내는 clock 만들기

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에 쓸 수 있는 function이다.
pad = padding
ex)

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

2 = maxlength 즉 문자열의 길이를 2로 한다.
"0" = 만약 두 글자가 아니라면 앞 자리에 0을 추가한다.

ex)

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

응용 - PadEnd()

padEnd() : 뒤 쪽에 padding을 추가해준다.
ex)

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

String()

숫자를 문자열로 바꾸어주는 함수.

참고사항)
Number() : 문자열 -> 숫자
parseInt() : 문자열 -> 정수
parseFloat() : 문자열 -> 실수

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