한 걸음씩

[JS] 밀리초 단위를 초단위로 바꾸는 방법 본문

JS

[JS] 밀리초 단위를 초단위로 바꾸는 방법

winter17 2023. 5. 24. 11:23

function todayTimes(){
  // 현재 시간 생성
  const today = new Date()
  // 올해연도 기준 크리스마스
  const christmas = new Date(`${today.getFullYear()}-12-25:00:00:00+0900`)
  // 크리스마스까지 남은 일수
  const timeDiff = christmas - today
  // 밀리초를 초단위로 변경
  // 1000: 밀리초, 60: 1분, 60: 1시간, 24: 1일
  const days = String(Math.floor(timeDiff / (1000 * 60 * 60 * 24))).padStart(2,"0"); // 남은 일
  const hours = String(Math.floor((timeDiff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60))).padStart(2, "0"); // 남은 시간
  const minutes = String(Math.floor((timeDiff % (1000 * 60 * 60)) / (1000 * 60))).padStart(2, "0"); // 남은 분
  const seconds = String(Math.floor((timeDiff % (1000 * 60)) / 1000)).padStart(2,"0"); // 남은 초
  
  eveTime.innerText = `${days}d, ${hours}h, ${minutes}m, ${seconds}s`
  }

todayTimes() //setInterval전에 함수를 한 번 더 실행시켜야 브라우저가 시작하자마자 화면에 나타난다
setInterval(todayTimes, 1000)

[문제]

크리스마스까지 남은 일수 계산하기

 

[방법]

1. 현재 연도 구하기

2. 올해 크리스마스 연도를 기준으로 구하기

3. 2번 - 1번 차이 구하기

4. 3번의 결과는 밀리초 단위로 계산되기 때문에 초 단위로 바꿔주기

      》 floor를 사용하는 이유는 정수부분만 필요하기 때문!

5. setInterval을 이용해서 1초마다 출력되도록 설정하기

 

[밀리초 → 초]

우선 크리스마스까지의 날짜 차이를 구하면 이상한 숫자가 나오는데 그게 밀리초 단위로 표현한 것이다.

차이가 18571161380  라고 할 때, day, hour, min, sec 전부 초 단위로 변환해야하는데 다음과 같다.

'(18571161380 / (1000 * 60 * 60 * 24))' 

1000ms = 1s

60s = 1m

60hour = 60m

24hour  = 1day 

 

위의 코드를 살펴보면 나머지(%)를 구하는 이유는 days, hours, mins, sec를 구하기 위함이고 나머지를 구했다고 해서 초 단위로 바뀐 건 아니기 때문에 초 단위로 바꾸기 위해서 나눗셈(/)을 해줘야한다


밀리초를 초로 바꾸는 과정이 헷갈려서 검색을 했는데 '100% 이해했다!' 보다는 '음... 알겠는데 나중에 또 했을때 할 수 있을까?' 하는 의문이 좀 남는다.

 

'JS' 카테고리의 다른 글

[JS] 호이스팅, 함수 레벨 스코프 & 블록 레벨 스코프  (0) 2023.06.02
[JS] Random Color  (0) 2023.05.25
[JS] Random Number Game  (0) 2023.05.23
[JS] preventDefault, action  (0) 2023.05.22
[JS] getElementsByTagName, querySelectorAll  (0) 2023.05.20