View
목표 날짜, 시간 설정
const xmasDay = new Date("2021-12-24:00:00:00+0900");
현재날짜, 시간 설정
const krCurr = new Date().getTime();
두 날짜간 차이 설정
const gap = xmasDay - krCurr;
gap을 콘솔에 출력해보면, 1000분의 1초 단위로 표시된다.
현재 시간 한국 표준시로 고정하기
const curTime = new Date(),//현재시간을 가져온다.(PC기준)
utc =curTime.getTime() + (curTime.getTimezoneOffset() * 60 * 1000),
krTime = 9*60*60*1000;
const krCurr = new Date(utc + krTime);
const gap = xmasDay - krCurr;
curTime.getTimezoneOffset() 으로 UTC시간을 가져온다. (분단위로 가져옴)
curTime.getTimezoneOffset() * 60 * 1000
분단위로 가져온 UTC시간을 1000분의 1초단위로 맞춰줌(curTime.getTime과 같게)
utc =curTime.getTime() + (curTime.getTimezoneOffset() * 60 * 1000)에서,
utc값은 현재 시간을 utc시간으로 바꾼 1000분의 1초 값으로 지정됨
한국표준시(KST)로 바꾸기 (UTC+9)
krTime = 9*60*60*1000;
한국 표준시는 UTC시간에서 9시간을 더해줘야 한다.(9시간 빠르다)
9시간을 1000분의 1초단위로 바꾸어준다.(curTime.getTime과 맞춰주기 위함)
const krCurr = new Date(utc + krTime);
최종적으로 kr Curr에 utc+krTime 을 더한 값을 넣어주어 완성!!
이렇게 해 줄 경우에는
const gap = xmasDay - krCurr;로 gap을 지정해준다.
시,분,초까지 카운트다운 할 것이므로 Math.floor로 계산한다.
day만 구하는 경우에는 Math.ceil로 계산하여 +1일 되도록 해도 좋음.
Math.ceil : 올림
Math.floor : 내림
Math.round : 반올림
// const d = Math.floor(gap / (1000* 60 *60*24));
const d = Math.floor(gap/ day),
// const h = Math.floor((gap % (1000*60*60*24)) / (1000*60*60) );
h = Math.floor((gap % day / hour )),
// const m = Math.floor((gap % (1000*60*60))/(1000 * 60));
m = Math.floor((gap % hour)/minute),
// const s = Math.floor((gap %(1000*60))/1000);
s = Math.floor((gap %(minute))/second);
주석처리한 것과 주석처리 하지않은 것은 같은 표현임
(아래 참고)
const second = 1000,
minute = second * 60,
hour = minute * 60,
day = hour * 24;
함수를 실행해 줄때에는 setInterval(함수명, 1000);을 입력하여
초 단위로 화면에 표시되는 시간이 변경되도록 해준다.
html 태그 안의 텍스트를 아래와 같이 표현할 수 있다.
clock.innerText = `${d < 10? `0${d}` : d}d ${h < 10? `0${h}` : h}h ${m < 10 ? `0${m}` : m}m ${s < 10? `0${s}` : s}s`;
${d < 10? `0${d}` : d}d
${d}d 라고 쓸 경우
html 화면에 출력 : Math.floor(gap/ day)의결과 d ( ex. 남은 날짜 d) 로 표시
10일 이하일경우 9d, 8d, ...., 0d 라고 출력된다.
${d < 10? `0${d}` : d}d라고 쓸 경우
d가 10보다 작은지 확인 : d<10?
true : `0${d}` 이므로 09 08 07... 등이 반환된다.
false : d 이므로 11 12 13 등으로 반환
{} 바깥쪽의 d와 함께 09d, 11d 이런식으로 출력된다.