javascript countDown (날짜 카운트다운)

---

카운트다운 시계를 javascript 메소드를 활용해서 구현했다. 

새로운 제품이 출시되거나 이벤트 상품이 출시되면 할인 or 각종 카운트다운 이벤트가 종료될때 사용될 수 있는 기능이다. 

비즈니스에서 유용하게 사용될 수 있는 기능이다. 

 

ex: 할인 기간동안은 구매 가능 기간 종료우 구매 불가능 등등...

 

---

 

 

---

 

Github Source ☝ 구현 소스를 보실수 있습니다.

https://github.com/yoogukhyeon/vanilla_javascript

GitHub - yoogukhyeon/vanilla_javascript

 

---

 

1. 달 & 요일 셋팅

2. HTML 돔 찾기

3. 할일 종료 미래 시간을 셋팅

4. 미래시간에 달, 요일 찾아서 셋팅이 필요하다면 셋팅 (옵션)

5. 남은시간 비교 한수선언

6.  getTime() 메소드로 현재시간, 미래시간에 Date를 밀리세컨드로 변환

7. 각각 구한 밀리세컨드로 남은시간 값 구함

8. 하루, 한시간, 일분 각각에 밀리세컨드를 구함

9. 남은 시간을 구해서 values 배열을 생성 

10. 가져온 HTML 돔을 순회해서 구한 값들을 셋팅 

11. setInterval 함수를 활용해서 contdown 구현 

12. 시간이 종료될시 clearInterval 활용해서 종료

 

//달 & 요일 셋팅!
const months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
const weekdays = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];

//시간 dom 찾기
const times = document.querySelectorAll('.deadline_format  h4');

//new Date 인스턴스 선언
//미래 특정 시간을 설정
//년, 월, 일, 시, 분, 초
let futureDate = new Date(2023, 2 - 1, 27, 12, 40, 0);

//년도를 찾는다.
const year = futureDate.getFullYear();
//시간을 찾는다.
const hours = futureDate.getHours();
//분을 찾는다.
const mins = futureDate.getMinutes();
//초를 찾는다.
const sec = futureDate.getSeconds();

//달을 찾는다.
let month = futureDate.getMonth();
//찾은 달에 값을 달 배열에서 찾는다.
month = months[month];

//요일을 찾는다.
let weekday = futureDate.getDay();
//찾은 요일을 값을 요일 배열에서 찾는다.
weekday = weekdays[weekday];

//시간 셋팅
//Date시간을 밀리초로 환산한다.
const futureTime = futureDate.getTime();

//남아있는 시간을 비교하는 함수
function getRemainingTime() {
    //현재 시간과 비교한다.
    const today = new Date().getTime();

    //남아있는 시간을 구한다.
    //futureTime과 today 밀리초에 남은시간을 구한다.
    const remainTime = futureTime - today;

    //하루, 한시간, 일분을 밀리세컨드로 변환
    const oneDay = 24 * 60 * 60 * 1000;
    const oneHour = 60 * 60 * 1000;
    const oneMinute = 60 * 1000;

    // 남은시간을 oneDay 시간과 비교해서 요일 남은 시간을 구한다.
    // Math.floor 소수점을 버리고 가장큰 정수로 값을 반환
    let days = remainTime / oneDay;
    days = Math.floor(days);

    let hours = Math.floor((remainTime % oneDay) / oneHour);
    let mins = Math.floor((remainTime % oneHour) / oneMinute);
    let sec = Math.floor((remainTime % oneMinute) / 1000);

    const values = [days, hours, mins, sec];

    //시간이 10 아래는 앞에 0 숫자 셋팅 함수
    function format(item) {
        if (item < 10) return (item = `0${item}`);

        return item;
    }

    //times dom 배열에 값 셋팅
    times.forEach((item, idx) => {
        item.innerHTML = format(values[idx]);
    });

    //남아있는 시간이 0일경우 interval 종료
    if (remainTime < 0) {
        clearInterval(countDown);
        clearTime();
    }

    //시간이 종료이후 값을 00 변환 & text 노출
    function clearTime() {
        let days = 0;
        let hours = 0;
        let mins = 0;
        let sec = 0;

        const values = [days, hours, mins, sec];

        times.forEach((item, idx) => {
            item.innerHTML = format(values[idx]);
        });
        const expired = document.querySelector('.expired');
        expired.innerText = '할인 행사가 종료되었습니다.';
    }
}

//setInterval 함수로 count 사용
let countDown = setInterval(getRemainingTime, 1000);

//함수 실행
getRemainingTime();