[JavaScript] Clock 만들기

JavaScript에서 시계 만들기!

사용하는 함수

• document.querySelector : 현재 파일에서 CSS방식으로 element를 찾는다.
• new date() : 현재 시간 생성한다.
• getSeconds(), getMinutes(), getHours() : 초, 분, 시간을 각각 가져온다
• setInterval(code, delay) : 해당 code를 delay 밀리초단위로 반복해서 실행하는 함수이다.

1. h2 태그 안에 현재 시간에 해당하는 텍스트를 반복해서 띄워주기

: setInterval(code, delay)를 사용. code에 들어갈 함수는 h2 태그안에 텍스트(현재 시간)를 작성하는 함수.

2. 텍스트(현재 시간)를 h2태그 안에 작성하는 함수 만들기

const clock = document.querySelector('#clock'); 
function getClock() {
	const date = new Date(); 
    clock.innerText = `${date}`; 

• getClock()이라는 함수는 현재 시간을 h2태그 안에 작성하는 함수이다.
• date = new Date() : 현재 시간
• clock = document.querySelector(#clock) : h2 태그 찾기
• clock.innerText = ${date}; 현재시간을 h2태그 안에 작성한다.

3. 만든 함수를 setInterval()에 넣어서 반복해서 실행하기

const clock = document.querySelector('#clock'); 
function getClock() {
	const date = new Date(); 
    clock.innerText = `${date}`; 
    
setInterval(getClock, 1000);

: setInterval(getClock, 1000) 1,000 밀리세컨드 마다 h2 태그 안에 현재시간을 작성하는 함수를 반복해서 실행하면 시계가 완성된다.

최종

const clock = document.querySelector("h2#clock"); //element 찾기

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}`; //#clock인 태그에 해당 택스트 삽입
}

getClock(); //시작하자마자 시간 띄워주기
setInterval(getClock, 1000); //해당 함수를 1초마다 반복해서 실행하기