[제이쿼리]특정시간에만 버튼(이미지) 활성화

버튼을 특정 시간에만 활성화 시키고 싶을때 또는 특정 시간에만 어떤 이미지를 사용하고 싶을때 사용 할 수 있는 제이쿼리를 만들어 보려고 한다. 

 

원하는 기간에만 특정 이미지로 교체( jquery)

예를 들어

이미지 출처 : 내가 만듦

이렇게 9시부터 6시까지만 왼쪽 버튼(이미지)을 활성화 시켜놓다가, 6시가 지나면 비활성 버튼으로 이미지를 교체할 수 있는 방법이다. 

 

HTML

<div class="call_btn">
    <a href="tel:010-000-0000">
        <img src="iocn_on.png" alt="고객선터 전화걸기">
    </a>
</div>

이미지를 넣은 DIV 블럭을 하나 만들어 준다. 

JQUERY

현재시간 구하기

    var Now = new Date(); // 현재 날짜 및 시간
    var nowMonth = Now.getMonth() + 1; // 월
    var nowDay = Now.getDate(); // 일
    var nowHour = Now.getHours(); // 시
    var nowMins = Now.getMinutes(); // 분
 
    function pluszero(time){
        var time = time.toString(); // 시간을 숫자에서 문자로 바꿈
        if(time.length < 2){ //2자리 보다 작다면
            time = '0' + time; //숫자앞 0을 붙여줌
            return time; //값을 내보냄
    }else{
        return time; //2자리라면 값을 내보냄
    }
    }
    nowMonth = pluszero(nowMonth); //만들었던 함수 적용
    nowDay = pluszero(nowDay);
    nowHour = pluszero(nowHour);
    nowMins = pluszero(nowMins);
 
    var nowtime = nowMonth + nowDay + nowHour + nowMins; // 월+일+시+분

현재 월일시분을 가지고와서 2자리 이하라면 앞에 0을 붙여 8자 형태로 만들어준다. (EX. 04021805)

 

JQUERY

특정 시간에 이미지 변경

 
    var startdate = 04020900 //시작 시간
    var enddate = 04021800 // 종류 시간
 
    if(startdate > nowtime || enddate < nowtime ){ //지금이 시작시간보다 작거나, 종류시간보다 크면 
        $('.call_btn img').attr('src', 'icon_off.png');  //이미지 주소 변경
    }

이렇게 원하는 시작 시간과 종류시간을 정해주면 그 시간에는 기존 이미지, 그 이후에는 원하는 이미지로 교체가 가능하다. 

* 하루루틴으로 변경하려면, 월,일은 구할 필요없이 시/분만 있어도 될것 같다

기간으로 활성화를 원하면 월/일까지 구하면 된다.

* 모바일에서 유용하게 사용할 수 있지 않을까 싶다.