js implémentation d'une fonction d'écran de verrouillage simple example_javascript skills

L'exemple de cet article décrit comment implémenter une fonction d'écran de verrouillage simple dans js. Partagez-le avec tout le monde pour votre référence. La méthode de mise en œuvre spécifique est la suivante :

//********* 锁屏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);
}

Si vous ne savez pas ce qu'est un écran de verrouillage, vous pouvez vous rendre sur 163 Mailbox pour y jeter un œil. Le but est de verrouiller temporairement l'écran pour préserver votre espace de travail lorsque vous souhaitez quitter l'écran pendant une période de 163 heures. temps. Si vous le ramenez, vous pouvez le restaurer dans l'espace de travail d'origine en saisissant à nouveau le mot de passe pour vérification.

Généralement, la fonction d'écran de verrouillage est implémentée en ajoutant un calque de masque opaque à la page ou en utilisant deux zones pour s'afficher et se masquer. Il est très difficile de mettre en œuvre la fonction d'écran de verrouillage pour un site Web construit à l'aide d'un cadre. Parce que les divs ne peuvent pas être utilisés comme calques sur les pages frame. De plus, le framework ne prend pas en charge l'attribut display:none de CSS.

La méthode d'implémentation finale consiste à ajouter un autre cadre à FRAMESET. En cas d'urgence, l'attribut rows de FRAMESET définit la hauteur du cadre nouvellement ajouté à 0. Lorsque vous cliquez sur le bouton de l'écran de verrouillage, la hauteur des autres cadres dans FRAMESET est définie sur 0 et la hauteur du nouveau cadre est définie sur *. De cette façon, nous avons complété la fonction de remplacement du cadre. Après le déverrouillage, réinitialisez l'attribut rows de FRAMESET à sa valeur initiale et l'écran reviendra à son état d'origine.

Cela ne s’arrête pas là. Si l'utilisateur clique avec le bouton droit sur l'écran pour actualiser ou appuie sur la touche F5 pour actualiser la page, la fonction de vérification du mot de passe de l'écran de verrouillage sera contournée. Ceci peut être réalisé en empêchant l'implémentation par défaut de F5 et du bouton droit de la souris.

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

Dernière méthode appelée :

Copier le code Le code est le suivant :

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

J'espère que cet article sera utile à la conception de la programmation JavaScript de chacun.