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

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 |