동영상 플레이어, 타이머, 스톱워치 등을 개발하다 보면 초 단위로 저장된 시간 값을 "HH-MM-SS" 형식으로 바꿔 화면에 표시해야 하는 경우가 자주 있습니다. 이 글에서는 JavaScript만으로 이 변환을 간단하게 처리하는 방법을 예제와 함께 살펴보겠습니다.
변환 원리 이해하기
핵심 아이디어는 매우 단순합니다. 전체 초를 큰 단위부터 차례대로 쪼개는 것입니다.
- 시간(HH): 전체 초를 3600(60분 × 60초)으로 나눈 몫
- 분(MM): 시간을 제외한 나머지 초를 60으로 나눈 몫
- 초(SS): 시간과 분을 모두 제외하고 남은 값
마지막으로 각 값이 한 자리 수일 때 앞에 "0"을 붙여 항상 두 자리로 표시되도록 처리하면 완성입니다.
예제 코드
<html>
<head>
<title>JavaScript Dates</title>
</head>
<body>
<div id="newSeconds"></div>
<script>
var convertSeconds = function(sec) {
var hrs = Math.floor(sec / 3600);
var min = Math.floor((sec - (hrs * 3600)) / 60);
var seconds = sec - (hrs * 3600) - (min * 60);
seconds = Math.round(seconds * 100) / 100;
var result = (hrs < 10 ? "0" + hrs : hrs);
result += "-" + (min < 10 ? "0" + min : min);
result += "-" + (seconds < 10 ? "0" + seconds : seconds);
return result;
}
var add_seconds = convertSeconds(100);
document.getElementById("newSeconds").innerHTML = add_seconds;
</script>
</body>
</html>
코드 살펴보기
Math.floor(): 나눗셈 결과에서 소수점 이하를 버려 정수 부분만 구합니다.Math.round(seconds * 100) / 100: 소수 단위의 초가 있을 경우 소수점 둘째 자리까지 반올림하여 깔끔하게 정리합니다.- 삼항 연산자(
? :): 값이 10보다 작으면 앞에 "0"을 붙여 항상 두 자리 형식을 유지합니다.
실행 결과
위 코드를 실행하면 100초는 다음과 같이 변환됩니다.
00-01-40
즉, 0시간 1분 40초를 의미합니다. 이처럼 함수 하나만 정의해 두면 어떤 초 값이든 손쉽게 HH-MM-SS 형식으로 변환해 사용할 수 있습니다.