웹 개발을 하다 보면 사용자에게 더 익숙한 12시간制(오전/오후) 형식으로 시간을 표시해야 하는 경우가 많습니다. 이 글에서는 자바스크립트(JavaScript)를 이용해 24시간 형식의 시간을 12시간 형식으로 변환하는 간단한 프로그램을 소개합니다.
예제 코드
다음은 HTML 입력창에 시(hour)와 분(minute)을 입력받아, 버튼 클릭 시 12시간 형식으로 변환해 화면에 출력하는 전체 코드입니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.result {
font-size: 18px;
font-weight: 500;
color: rebeccapurple;
}
</style>
</head>
<body>
<h1>Convert 24 hours format to 12 hours</h1>
<label>Hours </label><input class="hour" type="number"></br>
<label>Minutes </label><input class="minute" type="number"><br/>
<div class="result"></div><br />
<button class="Btn">CLICK HERE</button>
<h3>Click on the above button to convert the above 24 hour format to 12 hour format</h3>
<script>
let resEle = document.querySelector(".result");
let BtnEle = document.querySelector(".Btn");
let hrEle,minEle;
BtnEle.addEventListener("click", () => {
hrEle = document.querySelector('.hour').value;
minEle = document.querySelector('.minute').value;
if(hrEle>=0 && hrEle<=24 && minEle >=0 && minEle <= 60){
let AMorPM='AM';
if(hrEle>12)AMorPM='PM';
hrEle = (hrEle % 12);
resEle.innerHTML = 'TIME = '+hrEle+' : '+minEle+' '+AMorPM;
}
});
</script>
</body>
</html>실행 결과
먼저 24시간 형식으로 유효한 시간과 분을 입력합니다.
그다음 'CLICK HERE' 버튼을 클릭하면 아래와 같이 오전/오후가 포함된 12시간 형식으로 변환된 결과가 화면에 출력됩니다.
코드 동작 원리
- 입력값 검증: 시간이 0~24 사이, 분이 0~60 사이일 때만 변환 작업을 수행하여 잘못된 입력을 걸러냅니다.
- 모듈로(%) 연산:
hrEle % 12를 사용해 13~23시를 1~11로 변환합니다. 예를 들어 15시는 15 % 12 = 3, 즉 오후 3시가 됩니다. - 오전/오후 판별: 입력된 시간이 12보다 크면 'PM', 그렇지 않으면 'AM'으로 지정합니다.
개선 팁
실무에서는 몇 가지 예외 처리를 추가하면 더 완성도 높은 코드가 됩니다.
- 입력값이 숫자인지 확인하기 위해
Number()또는parseInt()로 명시적 형 변환을 해주는 것이 좋습니다. - 정오(12시)와 자정(0시)의 경우, 일반적으로 정오는 'PM 12', 자정은 'AM 12'로 표기되므로 별도 조건문으로 처리하면 자연스럽습니다.
- 분이 한 자리 수일 때 앞에 0을 붙여 두 자리로 표시하려면
String(minEle).padStart(2, '0')을 활용할 수 있습니다.
이처럼 간단한 모듈로 연산과 조건문만으로도 24시간 형식을 12시간 형식으로 손쉽게 변환할 수 있습니다. 실제 프로젝트에서는 위의 개선 팁을 참고해 예외 상황까지 처리하는 것을 권장합니다.