Javascript code-based simple lock screen _ javascript skills

This article mainly introduces how to implement simple screen lock in javascript. The example analyzes the skills related to element display and hiding in javascript operation pages, this article describes how to implement simple screen lock in javascript by referring to examples of javascript elements and tips related to mouse and keyboard events. Share it with you for your reference. The specific implementation method is as follows:

*************************** Function LockScreen (tag, title, width, height, url) {if (tag) // lock screen {var lockp = document. getElementById ("lockscreen"); if (lockp! = Null) {lockp. style. display = "block"; var subp = document. getElementById ("subdialog"); if (subp! = Null) {subp. style. display = "block"; document. getElementById ("dialog1 "). src = url ;}} else {// create a new lock DIV and execute var tabframe = document. createElement ("p"); tabframe. id = "lockscreen"; tabframe. name = "lockscreen"; tabframe. style. top = '0px '; tabframe. style. left = '0px '; tabframe. style. height = '20180101'; tabframe. style. width = '000000'; tabframe. style. position = "absolute"; tabframe. style. filter = "Alpha (opacity = 10)"; tabframe. style. backgroundColor = "#000000"; tabframe. style. Z index = "99998"; document. body. appendChild (tabframe); tabframe. style. display = "block"; // sub-DIV var subp = document. createElement ("p"); subp. id = "subdialog"; subp. name = "subdialog"; subp. style. top = Math. round (tabframe. clientHeight-height)/2); subp. style. left = Math. round (tabframe. clientWidth-width)/2); subp. style. height = height + 'px '; subp. style. width = width + 'px '; subp. style. position = "absolute"; subp. style. backgroundColor = "#000000"; subp. style. zIndex = "99999"; subp. style. filter = "Alpha (opacity = 100)"; subp. style. border = "1px"; // subp. onmousemove = mouseMoveDialog; // subp. onmousedown = control_onmousedown; // subp. onmouseup = mouseUp; document. body. appendChild (subp); subp. style. display = "block"; // subp. onclick = UNLockScreen; var iframe_height = height-30; var titlewidth = width; var html ="
 
 
  
  
"Html + ="
  
  "; Html + =" 
   "; Html + =" 
   "; Html + =" 
   
 
   
 
    
 
    
"; Html + =" 
     
 
      
 
       
 
        
"+ Title +"
 
        
 
       
 
      
 
     
"; Html + ="
 
    
 
   
 
    
 
    
 
    
 
   
 
    
 
    
 
    
 
  
 
 
"; Subp. innerHTML = html ;}} else {// unscreen var lockp = document. getElementById (" lockscreen "); if (lockp! = Null) {lockp. style. display = "none";} var subp = document. getElementById ("subdialog"); if (subp! = Null) {subp. style. display = "none" ;}} function UNLockScreen () {LockScreen (false );}

If you do not know what the screen lock is, you can go to the 163 mailbox to see it. The purpose is to temporarily lock the screen and reserve the workspace when you want to leave the screen for a while. If you bring it back, you only need to re-enter the password for verification to restore it to the original workspace.

Generally, the screen lock function is implemented by adding an opaque mask layer on the page, or two areas are used to hide each other. It is very difficult for a website built using a frame to implement the screen lock function. Because p cannot be used as the layer on the Framework page. Moreover, the Framework does not support the display: none; attribute of css.

The final implementation method is to add another frame in the FRAMESET. When an error occurs, the rows attribute of the FRAMESET sets the newly added frame to a height of 0. When you click the lock screen button, set the height of other frames in the FRAMESET to 0 and the height of the newly added frame *. In this way, the frame replacement function is completed. After unlocking, reset the rows attribute of FRAMESET to the initial value and restore the screen to the original state.

This is not over. If you right-click the screen to refresh the page, or press F5 to refresh the page, the password verification function of the screen lock will be bypassed. You can achieve the goal by blocking the default values of F5 and right-click.

// Stop F5 or right-click to refresh the screen so that the screen lock fails. Document. onkeydown = function () {if (event. keyCode = 116) {event. keyCode = 0; event. returnValue = false;} document. oncontextmenu = function () {event. returnValue = false ;}

The last call method is as follows:

The Code is as follows:

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

I hope this article will help you design javascript programs.