[Javascript/자바스크립트] 실시간 시계 만들기

웹사이트를 만들때 초단위로 시간이 흐르는 시계를 만들고 싶을때는 자바스크립트를 이용하면 된다.

 

<div class="js-clock">
	<h1>
		00:00:00
	</h1>
</div>

HTML 코드에 간단하게 div태그를 하나 만들어 준다.

우리는 Javascript를 통해서 저기 있는 00:00:00이라는 텍스트를 실시간으로 변하는 시계로 변환시킬겁니다.

 

 

const clockContainer=document.querySelector(".js-clock");
const clockTitle=clockContainer.querySelector("h1");

function getTime(){
	const date=new Date();
	const minutes=date.getMinutes();
	const hours=date.getHours();
	const seconds=date.getSeconds();
	clockTitle.innerText=`${
		hours<10 ? `0${hours}` : hours
	}:${
		minutes<10 ? `0${minutes}` : minutes
	}:${
		seconds<10 ? `0${seconds}` : seconds
	}`;
}

function init(){
	getTime();
	setInterval(getTime,1000);  //매 1초마다 getTime함수가 실행됨
}

init();

 

 

 

 

const date=new Date();

이 코드에서 Date 객체를 호출했을때, 날짜를 나타내는 문자열을 반환합니다.

 

 

 

 

위 코드에서 그냥 시간 출력할려면 `${hours} : ${minutes} : ${seconds}`

이렇게 하면 안되나? 라는 의문을 가질 수 있습니다.

그런데 실제로 위 방법처럼 문자열을 출력 해버리면 12:12:6

이런식으로 초단위가 한자리수로 나와버립니다.

이를 해결하기 위해 도입한 방법이 바로 삼항연산자!!

 

오랜만에 c언어에서 배웠던 삼항연산자라는 친구를 만났습니다.

사실 절대 만날일이 없을줄 알았는데 여기서 만나네..ㅎ

seconds<10 ? `0${seconds}` : seconds

 

삼항연산자라는건 if문처럼 조건문입니다.

설명은 쉬우니까 패스~

 

 

그리고 init함수 안을 보면

setInterval(getTime,1000);

위 함수를 실행하면 매 1초(1000ms)마다 getTime함수가 실행이 됩니다.

setInterval은 아주 유용한 함수니까 기억해놓기!!!

 

 

 

 

이 코드를 짜면서 새로 알게된 팁(?)과 정보들이 몇가지 있습니다.

 

1. js파일은 최대한 기능별로 나눠서 만들기.
   여러개의 js파일이 만들어져도 전혀 상관없음!!
   
   
2. js파일을 처음 시작할때 init함수를 미리 만들기.
   코드 짜기 훨씬 더 간편함!

뭐 별거는 아닌데 위 원칙을 준수하면서 자바스크립트 공부를 열심히 하겠습니다~