Home IT/WEB 초를 hh:mm:ss 형태로 변경하는 방법

[javascript]초를 hh:mm:ss 형태로 변경하는 방법

secondsToTimeFormat (duration) {
      // 초를 mm:ss format 으로 변환
      const totalSeconds = parseInt(duration)
      const hours = Math.floor(totalSeconds / 3600)
      const minutes = Math.floor((totalSeconds % 3600) / 60)
      const seconds = parseInt(totalSeconds) % 60
      const hh = String(hours).padStart(2, '0')
      const mm = String(minutes).padStart(2, '0')
      const ss = String(seconds).padStart(2, '0')
      return hours > 0 ? `${hh}:${mm}:${ss}` : `${mm}:${ss}`
},
  • const totalSeconds = parseInt(duration): 주어진 duration 값을 정수형으로 변환하여 totalSeconds 변수에 할당합니다. 이 변수에는 총 시간을 초 단위로 나타내는 값이 들어갑니다.
  • const hours = Math.floor(totalSeconds / 3600): 전체 시간을 시간 단위로 변환합니다. 3600으로 나눈 후 소수점을 버림하여 얻은 값입니다.
  • const minutes = Math.floor((totalSeconds % 3600) / 60): 전체 시간에서 시간을 제외한 나머지를 분 단위로 변환합니다. totalSeconds를 3600으로 나눈 후, 남은 값을 60으로 나눈 후 소수점을 버림하여 얻은 값입니다.
  • const seconds = parseInt(totalSeconds) % 60: 전체 시간에서 시간과 분을 제외한 나머지를 초 단위로 변환합니다. totalSeconds를 60으로 나눈 나머지 값을 구합니다.
  • const hh = String(hours).padStart(2, ‘0’): 시간을 두 자리로 만들어주기 위해 hours 변수를 문자열로 변환한 후, padStart() 메서드를 사용하여 두 자리로 만듭니다. 만약 한 자리 수라면 앞에 0을 채웁니다.
  • const mm = String(minutes).padStart(2, ‘0’): 분을 두 자리로 만들어주기 위해 minutes 변수를 문자열로 변환한 후, padStart() 메서드를 사용하여 두 자리로 만듭니다.
  • const ss = String(seconds).padStart(2, ‘0’): 초를 두 자리로 만들어주기 위해 seconds 변수를 문자열로 변환한 후, padStart() 메서드를 사용하여 두 자리로 만듭니다.
  • return hours > 0 ? ${hh}:${mm}:${ss}:${mm}:${ss}“: 시간이 0보다 크면 “시:분:초” 형식으로 반환하고, 그렇지 않으면 “분:초” 형식으로 반환합니다.
inline ad

RECENT POSTS

[css]autoprefixer: end value has mixed support, consider using flex-end instead warning 처리 및 다양한 에러 메시지 의미

이 경고 메시지는 CSS를 처리하는 도구인 Autoprefixer가 justify-content: end; 속성값을 처리하려 할 때 발생합니다. Autoprefixer는 CSS에 벤더 접두사를 자동으로 추가해 주는 도구로, 다양한 브라우저에서 CSS 속성이...

[javascript]Math.min, Math.max 사용방법

Math.min과 Math.max는 JavaScript의 Math 객체에서 제공하는 메서드로, 각각 주어진 숫자들 중 최소값과 최대값을 반환합니다. 이 메서드들은 다양한 수학 연산과 데이터 처리에서 유용하게 사용될 수...

널 병합 연산자 Nullish coalescing operator (??) 에 대해서 알아보자.

널 병합 연산자 Nullish coalescing operator (??)는 JavaScript에서 null이나 undefined 값을 체크하는 데 사용되는 연산자입니다. 이 연산자는 좌변의 피연산자가 null 또는 undefined일 경우 우변의 피연산자를 반환하고, 그렇지 않은 경우 좌변의...

[css]부모 요소의 border-radius가 자식 요소의 background-color로 가려지지 않도록 설정할 수 있는 방법

overflow: hidden 속성 사용 부모 요소의 border-radius를 자식 요소의 background-color로 가려지지 않도록 설정해야 합니다. 이를 위해 부모 요소에 overflow: hidden; 속성을 추가하여 자식 요소의 배경이...