간단한 잠금 화면 기능의 js 구현 example_javascript 기술

이 글의 예시에서는 js에서 간단한 잠금 화면 기능을 구현하는 방법을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 구체적인 구현 방법은 다음과 같습니다.

//********* 锁屏DIV ***************************
function LockScreen(tag,title,width,height,url)
{
  if (tag) //锁屏
  {
    var lockdiv = document.getElementById("lockscreen");
    if (lockdiv!=null)
    {
      lockdiv.style.display = "block";
      var subdiv = document.getElementById("subdialog");
      if (subdiv!=null)
      {
        subdiv.style.display = "block";
        document.getElementById("dialog1").src = url;
      }      
    }else{
      //创建新的锁屏DIV,并执行锁屏
      var tabframe= document.createElement("div");
      tabframe.id = "lockscreen";
      tabframe.name = "lockscreen";
      tabframe.style.top = '0px';
      tabframe.style.left = '0px';
      tabframe.style.height = '100%';
      tabframe.style.width = '100%';
      tabframe.style.position = "absolute";
      tabframe.style.filter = "Alpha(opacity=10)";
      tabframe.style.backgroundColor="#000000";
      tabframe.style.zIndex = "99998";
      document.body.appendChild(tabframe);
      tabframe.style.display = "block";
      //子DIV
      var subdiv = document.createElement("div");
      subdiv.id = "subdialog";
      subdiv.name = "subdialog";
      subdiv.style.top = Math.round((tabframe.clientHeight-height)/2);
      subdiv.style.left = Math.round((tabframe.clientWidth-width)/2);
      subdiv.style.height = height+'px';
      subdiv.style.width = width+'px';
      subdiv.style.position = "absolute";
      subdiv.style.backgroundColor="#000000"; 
      subdiv.style.zIndex = "99999";
      subdiv.style.filter = "Alpha(opacity=100)";
      subdiv.style.border = "1px";
      //subdiv.onmousemove = mouseMoveDialog;
      //subdiv.onmousedown = control_onmousedown;
      //subdiv.onmouseup = mouseUp;
      document.body.appendChild(subdiv);
      subdiv.style.display = "block";
      //subdiv.onclick=UNLockScreen;
      var iframe_height = height-30;
      var titlewidth = width;
      var html = "<table border='0' cellpadding='0' cellspacing='0'>"
      html += "<tr><td></td><td>";
      html += "<table><tr><td><font color='#FFFFFF'><b>"+title+"</b></font></td><td style='width:30px' valign='top'><img src='/images/images/close.gif' ></img></td></tr></table>";
      html += "</td><td></td></tr>";
      html += "<tr><td></td><td style='height:100px;'><iframe id='dialog1' frameborder=0 style='width:"+titlewidth+"px;height:" + iframe_height + "px' src='"+url+"'></iframe></td><td></td></tr>";
      html += "<td></td><td></td><td></td>";
      html += "</table>";
      subdiv.innerHTML = html;
    }
  }else{
    //解屏
    var lockdiv = document.getElementById("lockscreen");
    if (lockdiv!=null)
    {
      lockdiv.style.display = "none";
    }
    var subdiv = document.getElementById("subdialog");
    if (subdiv!=null)
    {
      subdiv.style.display = "none";
    }
  }
}
function UNLockScreen(){
  LockScreen(false);
}

잠금 화면이 무엇인지 모르신다면 163 메일박스에 들어가 보시면 됩니다. 일정 시간 동안 화면을 떠나고 싶을 때 작업 공간을 보호하기 위해 화면을 일시적으로 잠그는 것이 목적입니다. 시간. 다시 불러올 경우에는 확인을 위해 비밀번호를 다시 입력하여 원래 작업공간으로 복원할 수 있습니다.

일반적으로 잠금화면 기능은 페이지에 불투명한 마스크 레이어를 추가하거나, 두 영역을 이용해 서로 표시하고 숨기는 방식으로 구현됩니다. 프레임을 이용하여 구축한 웹사이트에서는 잠금화면 기능을 구현하는 것이 매우 어렵습니다. div는 프레임 페이지에서 레이어로 사용될 수 없기 때문입니다. 게다가 프레임워크는 CSS의 display:none 속성을 지원하지 않습니다.

최종 구현 방법은 FRAMESET에 다른 프레임을 추가하는 것입니다. 긴급 상태에서는 FRAMESET의 행 속성이 새로 추가된 프레임의 높이를 0으로 설정합니다. 잠금 화면 버튼을 클릭하면 FRAMESET의 다른 프레임의 높이는 0으로 설정되고, 새 프레임의 높이는 *로 설정됩니다. 이로써 프레임 교체 기능이 완성되었습니다. 잠금 해제 후 FRAMESET의 행 속성을 초기값으로 재설정하면 화면이 원래 상태로 돌아갑니다.

여기서 끝나지 않습니다. 사용자가 화면을 마우스 오른쪽 버튼으로 클릭하여 새로 고치거나, F5 키를 눌러 페이지를 새로 고치는 경우 잠금 화면의 비밀번호 확인 기능이 우회됩니다. 이는 F5 키와 마우스 오른쪽 버튼의 기본 구현을 방지함으로써 달성할 수 있습니다.

//阻止F5或者鼠标右键刷新,使锁屏失效。
document.onkeydown = function(){
 if(event.keyCode==116) {
 event.keyCode=0;
 event.returnValue = false;
 }
}
document.oncontextmenu = function() {event.returnValue = false;}

마지막 호출 방법:

코드 복사 코드는 다음과 같습니다.

LockScreen(true,'title',424,314,'http ://www.baidu.com');

이 기사가 모든 사람의 JavaScript 프로그래밍 설계에 도움이 되기를 바랍니다.