JavaScript에서 초를 분과 초로 변환하기
타이머나 동영상 재생 시간 등을 화면에 표시할 때, 총 초(second) 값을 "분:초" 형태로 바꿔야 하는 경우가 자주 있습니다. 이 글에서는 JavaScript를 사용해 초 단위 숫자를 사람이 읽기 쉬운 분·초 형식으로 변환하는 방법을 예제 코드와 함께 살펴봅니다.
변환 원리
변환 로직은 아주 간단한 나눗셈과 나머지 연산으로 구성됩니다.
- 시간(hour): 전체 초를 3600으로 나눈 몫
- 분(minute): 3600으로 나눈 나머지를 다시 60으로 나눈 몫
- 초(second): 60으로 나눈 나머지 값
여기서 ~~(틸드 두 개)는 비트 연산자를 활용한 정수 변환 기법으로, Math.floor()와 같은 효과를 내며 소수점 이하를 잘라냅니다.
예제 코드
<html>
<head>
<title>JavaScript Dates</title>
</head>
<body>
<script>
function myTime(time) {
var hr = ~~(time / 3600);
var min = ~~((time % 3600) / 60);
var sec = time % 60;
var sec_min = "";
if (hr > 0) {
sec_min += "" + hr + ":" + (min < 10 ? "0" : "");
}
sec_min += "" + min + ":" + (sec < 10 ? "0" : "");
sec_min += "" + sec;
return sec_min + " min";
}
document.write(myTime(150));
</script>
</body>
</html>
실행 결과
위 코드를 실행하면 myTime(150) 함수가 150초를 계산해 다음과 같은 결과를 출력합니다.
2:30 min
코드 상세 설명
~~(time / 3600): 시간을 구합니다. 150초는 1시간(3600초) 미만이므로 결과는 0입니다.~~((time % 3600) / 60): 분을 구합니다. 150 ÷ 60 = 2.5이므로 소수점을 버려 2분이 됩니다.time % 60: 나머지 초를 구합니다. 150을 60으로 나눈 나머지는 30초입니다.- 삼항 연산자
(min < 10 ? "0" : "")는 한 자리 숫자 앞에 0을 붙여 "02:05"처럼 항상 두 자리로 표시되도록 도와줍니다.
이처럼 몇 줄의 코드만으로 초 단위 값을 손쉽게 "분:초" 형식으로 변환할 수 있습니다. 동영상 플레이어, 타이머, 스톱워치 등 경과 시간을 표시해야 하는 다양한 UI에서 유용하게 활용할 수 있으니, 필요에 따라 시간(hour) 처리 부분을 추가하거나 제거하여 응용해 보세요.