본문 바로가기
Develop/Javascript

[javascript] 타임아웃 체크하기 (SMS OPT)

kamuix 2011. 5. 12. 12:53

 
 
 
<html>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr" />
<title>timeout</title>
<link href="/css/popup.css" type=text/css rel="stylesheet">
<script>
var countTime = 3 * 60; //분
var startTime = new Date();
var startMicroTime = Math.floor(startTime.getTime()/1000);
 
function initForm(){
 
 var f = document.vpnForm;
 f.PASSWORD.focus();
 f.method.value = "optTime";
 f.target = "ifrm";
 f.submit();
}
 
function startTimer(remainTime){
 countTime = remainTime;
 if(countTime > 0){
  startTime = new Date();
  startMicroTime = Math.floor(startTime.getTime()/1000);
  countDown();
  document.getElementById('CONFIRM').style.display = "";
  document.getElementById('RECREATE').style.display = "";
  document.getElementById('CANCEL').style.display = "";
 }else{
  document.getElementById('countBox').innerHTML = "<b>비밀번호의 유효시간이 종료되었습니다.</b>";
  document.getElementById('CONFIRM').style.display = "none";
  document.getElementById('RECREATE').style.display = "";
  document.getElementById('CANCEL').style.display = "";
 }
 countDown();
}
 
 
function countDown(){
 var thisTime = new Date();
 var thisMicroTime = Math.floor(thisTime.getTime() / 1000);
 var totalSec = countTime - (thisMicroTime - startMicroTime);
 var killMin = Math.floor(totalSec / 60);
 var killMin = (100 + killMin + "").substring(1, 3);
 var killsec = Math.floor(totalSec % 60);
 var killsec = (100 + killsec + "").substring(1, 3);
 document.getElementById('countBox').innerHTML = killMin+"분 "+killsec+"초";
    
 if(totalSec > 0){
  setTimeout("countDown()", 1000);
 }else{
  document.getElementById('countBox').innerHTML = "<b>비밀번호의 유효시간이 종료되었습니다.</b>";
  document.getElementById('CONFIRM').style.display = "none";
 }
}
 
function optLogin(){
 var f = document.vpnForm;
 f.method.value = "otpCheck";
 if(f.PASSWORD.value == ""){
  alert("비밀번호를 입력하세요.");
  f.PASSWORD.focus();
  return;  
 }
 f.PASSWORD.value = f.PASSWORD.value.toUpperCase();
 f.target = "_self";
 f.submit();
}
 
function recreatePassword(){
 
 var f = document.vpnForm;
 
 f.method.value = "recreatePassword";
 f.target = "ifrm";
 f.submit();
 
 if(f.REQUEST_TYPE.value == "E"){
  alert("재전송");
 }else{
  alert("재전송!!!");
 } 
}
 
function goIndex(){
 this.location = "/index.jsp"; 
}
 
</script>
</head>
<body topmargin="0" leftmargin="0" onLoad="javascript:initForm()">
<form name="vpnForm" action="/sslvpn/login.do">
<input type="hidden" name="method">
<input type="hidden" name="SEQ" value="48446">
<input type="hidden" name="REQUEST_TYPE" value="S">
<input type="hidden" name="RADD" value="115.95.161.252">
<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0" style="table-layout:fixed">
 <tr>
  <td align="center" valign="middle">
   <table width="500" border="0" cellpadding="0" cellspacing="0">
       <tr>
           <td height="53" background="/images/popup/workPopTopBg.gif">
      <table width="100%"  border="0" cellspacing="0" cellpadding="0">
                <tr>
                    <td width="160"><img src="/images/popup/workPopCi.gif" width="160" height="53"></td>
                    <td align="right"><img src="/images/popup/workPopCi01.gif" width="132" height="53"></td>
                </tr>
            </table>
     </td>
       </tr>
       <tr>
           <td height="23">
      <table width="100%"  border="0" cellspacing="0" cellpadding="0">
       <tr>
        <td width="54"><img src="/images/popup/workPopTitHead.gif" width="54" height="23"></td>
 
        <td background="/images/popup/workPopTitBg.gif"><strong>문자메시지 O.T.P 확인</strong></td>
 
        <td width="30"><img src="/images/popup/workPopTitEnd.gif" width="30" height="23"></td>
       </tr>
      </table>
     </td>
       </tr>
       <tr>
           <td height="10" background="">
      <table width="100%"  border="0" cellspacing="0" cellpadding="0">
       <tr>
        <td width="30"><img src="/images/popup/workPopTitBottL.gif" width="30" height="10"></td>
        <td><img src="/images/popup/workPopTitBottBg.gif" width="1" height="10"></td>
        <td width="30"><img src="/images/popup/workPopTitBottR.gif" width="30" height="10"></td>
       </tr>
      </table>
     </td>
       </tr>
       <tr>
           <td valign="top">
      <table width="100%" height="100%"  border="0" cellpadding="0" cellspacing="0">
       <tr>
        <td width="30" background="/images/popup/workBodyL.gif"><img src="/images/popup/workBodyL.gif" width="30" height="9"></td>
        <td align="center" valign="top">
         <table width="100%"  border="0" cellspacing="0" cellpadding="5">
          <tr height="22">
 
           <td><b>문자메시지로 받으신 비밀번호를 아래에  입력하시기 바랍니다.</b><br><b>문자메시지의 경우 전송시간이 1분 이상 소요될 수 있습니다.</b></td>
 
          </tr>
          <tr>
           <td>
           <!-- 정보입력 시작 ----------------->
            <table width="100%" border="0" cellpadding="0" cellspacing="0" class="Table2NoW">
             <tr height="24">
 
              <td width="40%" class="Table1_Tit_T" align="center"><b>문자메시지 O.T.P</b></td>
 
              <td width="60%" class="Table1_List_T" bgcolor="#FFFFFF" align="left"><input type="password" name="PASSWORD" value="" style="width:100%"></td>
             </tr>
             </table>
            </div>
           </td>
          </tr>
          <tr height="30">
           <td><font color="blue"><b>남은 시간 : <span id="countBox"></b></font></td>
          </tr>
          <tr height="30">
 
           <td><font color="red">※ 남은시간이 초과된 경우 재발급 기능을 이용하여 비밀번호를 다시 발급 받으실 수 있습니다.</font></td>
 
          </tr>
         </table>
        </td>
        <td width="30" background="/images/popup/workBodyR.gif"><img src="/images/popup/workBodyR.gif" width="30" height="8"></td>
       </tr>
      </table>
     </td>
    </tr>
    <tr>
     <td height="30" background="/images/popup/workBottBg.gif">
      <table width="100%"  border="0" cellspacing="0" cellpadding="0">
       <tr>
        <td width="46"><img src="/images/popup/workBottL.gif" width="46" height="30"></td>
        <td><img src="/images/popup/workBottBg.gif" width="1" height="30"></td>
        <td width="49"><img src="/images/popup/workBottR.gif" width="49" height="30"></td>
       </tr>
      </table>
     </td>
    </tr>
    <tr>
     <td height="35" align="center" bgcolor="#E7E6E5">
      <img id="CONFIRM" src="/images/btn/confirm.gif" style="cursor:hand;display:none" onClick="optLogin()">
      <img id="RECREATE" src="/images/btn/recreate.gif" style="cursor:hand;display:none" onClick="recreatePassword()">
      <img id="CANCEL" src="/images/btn/cancel.gif" style="cursor:hand;display:none" onClick="goIndex()">
     </td>
    </tr>
   </table>
  </td>
 </tr>
</table>
</form>
<iframe name="ifrm" src="" style="display:"></iframe>
</body>
</html>

javascript 로 타임아웃 기능을 만들면 오른쪽 마우르 버튼으로 시간을 정지시킬수 있는데 이렇게 서버 시간으로 계산하면
정확한 흐름으로 체크 할수 있다..
저작자표시 비영리 변경금지

'Develop > Javascript' 카테고리의 다른 글

도로명 주소찾기 작업 (귀찮은작업..)  (4) 2012.10.05
window.print() 델리게이트함수 (프린트 전, 후)  (0) 2012.03.29
javascript 의 Remove Tag  (0) 2011.11.12
모바일웹 - 주소창 숨기기  (0) 2011.11.02
Javascript parseInt(08)=0? parseInt(09)=0?  (0) 2011.10.21
jQuery를 이용한 이미지 갤러리 예제  (0) 2011.10.04
Javascript UTF8 Encode Decode  (0) 2011.06.29
Ajax로 JSON 데이터를 받았을때 javascript 처리 방법  (0) 2011.05.24

'Develop/Javascript' Related Articles

티스토리툴바