[Javascript] 자바스크립트 시간 타이머 표시

 

 

---

은행 사이트의 상단처럼, 시간 타이머를 보여달라는 요청을 반영했다.

브라우저와 웹로직 서버의 카운트 시간이 다를 수 있기 때문에,

5분 마다 쿠키에 저장된 expired time을 가져와 계산.

<script type="text/javascript">
//<![CDATA[

    /* 2018.11.29 시간 연장 타이머 */

    var iSecond; // 초 단위로 환산
    var timerChecker = null;

    calcOffset(); /*화면을 불러올 때 마다 초기화*/

      function calcOffset() {
            var serverTime  = getCookie('serverTime');
            serverTime  = serverTime == null ? null : Math.abs(serverTime);
            /*브라우저 시간과 서버 시간과의 차이*/
            var clientTimeOffset = (new Date()).getTime() - serverTime ;

            var d = new Date();
            d.setTime(d.getTime() + 12*60*60*1000);

            setCookie('clientTimeOffset', clientTimeOffset, d );
     }


     function checkSession() {

               var sessionExpiry = Math.abs(getCookie('sessionExpiry'));
               var timeOffset = Math.abs(getCookie('clientTimeOffset'));
               var localTime = (new Date()).getTime();

               var d = new Date();
            d.setTime(d.getTime() + 12*60*60*1000);
               setCookie('remainTime', (sessionExpiry - (localTime - timeOffset)), d);

               var weblogicCountTm = (sessionExpiry - (localTime - timeOffset));

               var weblogicSc = weblogicCountTm / 1000;
               console.log( weblogicCountTm / 1000);

               iSecond = parseInt(weblogicSc);
               return weblogicCountTm;
               /* localTime - timeOffset > (sessionExpiry-(offset||0)); 세션이 만료되었는지 여부 반환*/


       }

    setSessionInfo();




    function fncClearTime(){
        iSecond = 3600;
    }

    window.onload = function(){
        fncClearTime();
        initTimer();
    }

    Lpad = function(str, len){
        str = str + "";
        while(str.length < len){
            str = "0" + str;
        }
        return str;
    }

    initTimer = function(){
        var timer = document.getElementById("timer");
        rHour = parseInt(iSecond/3600);
        rHour = rHour % 60;

        rMinute = parseInt(iSecond/60);
        rMinute = rMinute % 60;

        rSecond = iSecond % 60;

        if(iSecond > 0){
            timer.innerHTML = /* "&nbsp;" + Lpad(rHour, 2) + "시간" +  */Lpad(rMinute, 2) + "분 " + Lpad(rSecond,2) + "초";
            iSecond--;

            // 1 초 간격으로 체크
            timerCheker = setTimeout("initTimer()", 1000);

            // 5분에 한 번씩 세션 시간과 동기화.
            if(iSecond % 300 == 0)  checkSession();

            /* 세션 종료 시간 5분 전일 경우 재연장 알람 */
            if(iSecond == 300){
                windowOpen(contextPath + "/btwnflr/alertPop.do","timeAlerPop",329,131,1,"center",0);
            }
        }else{
            alert("사용시간 10분이 지나 로그인 창으로 돌아갑니다.");
            logoutUser();
        }


    }

    function refreshTimer(){
        var xhr = initAjax();
        xhr.open("POST", "<c:url value='/inc/incHeader.do' />", false);
        xhr.send();
        fncClearTime();
    }



    function logoutUser(){
        clearTimeout(timerChecker);
        var xhr = initAjax();
        xhr.open("POST", "<c:url value='/login/logOut.do' />", false);
        xhr.send();
        location.reload();
    }

    function initAjax(){ //브라우저에 따른 AjaxObject 인스턴스 분기 처리
        var xmlhttp = new XMLHttpRequest();
        return xmlhttp;
    }


//]]>
</script>

 

 

결과물

 

 

 

---