[JavaScript / jQuery] setTimeout 타이머로 이벤트 배너 기능 만들기

💡 실습 포인트!

• 오늘은 setTimeout 과 setInterval 에 대해 공부하고, 간단하게나마 이벤트 배너를 만들어보았다.
• 이벤트 배너의 포인트는 카운트다운이 되는 것과 0초가 되는 동시에 배너가 사라지는 것!!

---

💜 HTML

<div class="alert alert-danger" id="time-alert">
    🎁 <span id="time">5</span> 초 이내 구매 시 사은품 증정! 🎁
</div>

• 일단 적절한 위치에 위와 같이 태그를 넣어주었다.
• 빠른 디자인을 위해 Bootstrap 을 활용했다.
• 초는 계속 바뀌게 만들 예정이었므로 내용을 가져오기 쉽게 span 태그로 묶어주었다.

---

💜 JavaScript

var count = 5;
setInterval(function(){
    count -= 1;
    if (count > 0) {
        $('#time').html(count);
    } else {
        $('#time-alert').hide();
    }
}, 1000);

• 카운트는 5초로 진행할 것이고, 1초(1000ms)씩 줄어들 때마다 id 가 time 인 태그의 내용이 바뀌어야 한다.
• 그리고 카운트가 0이 되었을 때는 배너를 숨김처리를 해야 한다.
• 따라서 위와 같이 setInterval 을 작성하였다.