자바스크립트 오전 오후를 구해볼까...?

bat_zimin·2021년 11월 12일

JS 공부를 하며 노마드코더의 JS 코스를 보다 시간을 구하게 되었는데 갑자기 오전 오후를 나눠서 구하고 싶어졌습니다🙃

우선 시간을 구하자...!

JS의 시간을 구하는 방법💡

JS에서 시간을 구할 수 있는 방법은 생각보다 편리합니다.
기본적으로 제공되는 Date 객체를 이용하여 구할 수 있습니다.

시간대 기준은 유저의 pc 시간대를 기준으로 시간을 가져옵니다.

const time = new Date();
const hours = time.getHours();
const minutes = time.getMinutes();

현재 시간을 구합니다. 다른 date를 이용하여 다양한 날짜에 관한 정보를 얻을 수 있습니다.
중요한 점은 시간을 실시간으로 돌리고 싶다면 매 초마다 시간을 구한뒤 그 정보를 담고 있어야하기 때문에 함수로 묶어 줍시다.

지금이 오전인지 오후인지

function clock() {
	const time = new Date();
 	const hours = time.getHours();
	const minutes = time.getMinutes();

	if (hours > 12) {
 		const pmHours = hours - 12;
		console.log(pmHours, minutes);
  	} else {
    		console.log(hours, minutes);
  	}
}

위와 같이 if else문으로 묶어 아주 단순하게 표현이 가능합니다.
오후는 오전의 12시간이 지난 뒤 12시 이후 부터는 - 12를 해주면 될 아주 간단한 문제입니다.

이제 돌려봅시다🕒

시간은 다 구했습니다. 이제 시간을 실시간으로 만들기 위한 아주 조금의 코드가 필요합니다.

function clock() {
	const time = new Date();
 	const hours = time.getHours();
	const minutes = time.getMinutes();

	if (hours > 12) {
 		const pmHours = hours - 12;
		console.log(pmHours, minutes);
  	} else {
    		console.log(hours, minutes);
  	}
}

const test = setInterval(clock, 1000);
console.log(test);

시간에 대한 기준을 보통 ('시', '분', '초') 정도로까지 나누니 1초를 기준으로 잡고 매번 시간을 구하는 함수를 실행시켜주면 실시간으로 보여집니다.
위 코드 기준으로 매분만 구하면 되니 1분마다 구하면 되지 않냐라고 할 수 있지만 매 초마다 구해야 실시간과 같이 약 -1초 정도 차이가 납니다.

코드가 실행되는 시점이 현재 시간 기준 아주 미세하게 느리게 구해줄 수 밖에 없습니다. 이런 이유로 매초마다 인터벌을 실행해줘야 실시간에 맞춰 사용할 수 있습니다.
1분으로 실행하게 된다면 현재 시간을 구해주고 있긴 하지만 딜레이가 발생합니다. 이러한 이유로 최소 1초를 잡아줘야 합니다.

위 코드로 타입을 확인해보니 숫자로 나오네요. 콘솔도 숫자로 표기하여 줍니다.
위 숫자를 이용하여 직접 html에 출력할 수도 있겠고 시간에 맞춰 주,야간 모드 등으로 활용 해 볼 수 있겠습니다!