[JS] 마감 카운트다운 타이머 만들기

자바스크립트 마감 카운트다운 타이머 만들기

 

🩸이슈 발생

오늘 기준으로 남은 시간 타이머 만들어보기 (마감 타이머)

 

See the Pen Untitled by Give J (@Give-J) on CodePen.

 

728x90

 

---

🩹이슈 해결

1. HTML

<div class="db_title">
    <div style="width: 422px; margin-right: 32px;" id="modal">
        <span>오늘 마감</span>
        <p class="timer-wrap">
            <span class="h12"></span>
            <span> : </span>
            <span class="m1"></span>
            <span> : </span>
            <span class="s1"></span>
            <span> : </span>
            <span class="ms1"></span>
        </p>
    </div>
</div>

2. CSS

.db_title {
    display: flex;
    padding-left: 35%;
    padding-top: 21.5px; 
}

span {
    color: red;
    font-size: 22px;
    line-height: 100% ;
    font-weight: 600;
    position: relative;
 }

.timer-wrap span {
    letter-spacing: 6.72px;
    font-size: 32px;
}

3. JavaScript

// 10 넘을경우 숫자 처리방식
 function fGet2char(num) {
      return num < 10 ? "0" + num : String(num);
}

 // 타이머 데이터 넣기
 function ddayTimer() {
      let now = new Date();
      let midnight = new Date();
      midnight.setHours(24);
      midnight.setMinutes(0);
      midnight.setSeconds(0);
      midnight.setMilliseconds(0);

      let gap = Math.max(midnight.getTime() - now.getTime(), 0); // 음수 값 방지
      let HH = fGet2char(Math.floor(gap / 3600000) % 24);
      let MM = fGet2char(Math.floor((gap % 3600000) / 60000));
      let SS = fGet2char(Math.floor((gap % 60000) / 1000));
      let MS = fGet2char(Math.floor((gap % 1000) / 10));

      document.querySelectorAll('.timer-wrap').forEach(item => {
        item.querySelector('.h12').textContent = HH ;
        item.querySelector('.m1').textContent = MM ;
        item.querySelector('.s1').textContent = SS ;

      });

    document.querySelector('.ms1').textContent = MS;
    setTimeout(ddayTimer, 0.0000000000000000000000000001); 
    }


// 현재 날짜 구하기
function getCurrentDate() {
    let monthLists = document.querySelectorAll('.month');
    let nextMonthLists = document.querySelectorAll('.next-month');
    let dayLists = document.querySelectorAll('.day');
    let date = new Date();
    let year = date.getFullYear();
    let month = date.getMonth() + 1;
    let dateDay = new Date(year, month, 0);
    let day = dateDay.getDate();
    Array.prototype.forEach.call(monthLists, function(monthList){
        monthList.textContent = month;
    });
    Array.prototype.forEach.call(nextMonthLists, function(nextMonthList){
        if (month === 12) {
            nextMonthList.textContent = 1;
        } else {
            nextMonthList.textContent = month + 1;
        }
    });
    Array.prototype.forEach.call(dayLists, function(dayList){
        dayList.textContent = day;
    });
}

// 함수 호출
ddayTimer();
getCurrentDate();

---

💡유의사항

긴박함을 표현하기 위해 해놓은 밀리초는 실제 시간과 다를 수 있다.