jQuery - 타임세일 구현하기

타임세일 이벤트는 많은 쇼핑몰에서 진행되고 있는 이벤트 중 하나!

출처 : 텐바이텐

 

위의 디자인처럼 구현은 하지 않았지만 비슷한 형식으로 타임세일을 구현해보았다.

 

매일 특정시간대에 진행되는 타임세일 이벤트이기 때문에

카운트다운 하는 시계를 만드는 코드에 추가적으로 if else 문을 통해 시간 조건을 걸어주었다.

 

1. 특정 시간대만 상품이 노출되게 한다.

2. 이벤트 진행 시간대가 아니라면 
    1) 이벤트 진행 전 - 상품에 blur 필터를 추가하여 정보를 가리고, "3시 OPEN" 문구 노출
    2) 이벤트 진행 후 - 상품에 blur 필터를 추가하여 정보를 가리고, "내일 3시에 만나요" 문구 노출

 

function timeSale() {
    var nowTime = new Date();
    var openTime = new Date(now.getFullYear(),now.getMonth(),now.getDate(),15,00,00);
    var endTime = new Date(now.getFullYear(),now.getMonth(),now.getDate(),18,00,00);

    var now = nowTime.getTime();
    var open = openTime.getTime();
    var end = endTime.getTime();

   if(now < open){
        $('.timesale_products').addClass('blur');
        $('.minutes').hide();
        $('.col').hide();
        $(".hours").html('3시 OPEN');
   } else if(now > end){
        $('.timesale_products').addClass('blur');
        $('.minutes').hide();
        $('.col').hide();
        $(".hours").html('내일 3시에 만나요');
   } else {
        $('.minutes').show();
        $('.col').show();

        sec =parseInt(endTime - nowTime) / 1000;
        day  = parseInt(sec / 60 / 60 / 24);
        sec = (sec - (day * 60 * 60 * 24));
        hour = parseInt(sec / 60 / 60);
        sec = (sec - (hour * 60 * 60));
        min = parseInt(sec / 60);
        sec = parseInt(sec - (min*60));
        
        if(hour < 10){ hour = "0" + hour; }
        if(min < 10){ min = "0" + min; }
        if(sec < 10){ sec = "0" + sec; }
        $(".hours").html(hour);
        $(".minutes").html(min);
        $(".seconds").html(sec);
   }
 }
 setInterval(remaindTime,1000);

 

 

하지만 시간을 불러오는 과정에서 시간차가 발생해서인지

blur 클래스가 적용되는 데 시간이 조금 소요되어 더 보완해야 할 것 같다.