js pelaksanaan fungsi skrin kunci mudah kemahiran example_javascript

Contoh dalam artikel ini menerangkan cara melaksanakan fungsi skrin kunci mudah dalam js. Kongsikan dengan semua orang untuk rujukan anda. Kaedah pelaksanaan khusus adalah seperti berikut:

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

Jika anda tidak tahu apa itu skrin kunci, anda boleh pergi ke Peti Mel 163 untuk melihat Tujuannya adalah untuk mengunci skrin buat sementara waktu untuk mengekalkan ruang kerja anda apabila anda ingin meninggalkan skrin untuk tempoh masa. Jika anda membawanya kembali, anda boleh memulihkannya ke ruang kerja asal dengan memasukkan semula kata laluan untuk pengesahan.

Secara amnya, fungsi skrin kunci dilaksanakan dengan menambahkan lapisan topeng legap pada halaman atau menggunakan dua kawasan untuk menunjukkan dan menyembunyikan satu sama lain. Amat sukar untuk melaksanakan fungsi skrin kunci untuk tapak web yang dibina menggunakan bingkai. Kerana div tidak boleh digunakan sebagai lapisan pada halaman bingkai. Selain itu, rangka kerja tidak menyokong atribut display:none;

Kaedah pelaksanaan terakhir ialah menambah bingkai lain pada FRAMESET Dalam keadaan kecemasan, atribut baris FRAMESET menetapkan ketinggian bingkai yang baru ditambah kepada 0. Apabila butang skrin kunci diklik, ketinggian bingkai lain dalam FRAMESET ditetapkan kepada 0 dan ketinggian bingkai baharu ditetapkan kepada *. Dengan cara ini kami telah menyelesaikan fungsi penggantian bingkai. Selepas membuka kunci, tetapkan semula atribut baris FRAMESET kepada nilai awalnya dan skrin akan kembali kepada keadaan asalnya.

Ini tidak berakhir di situ. Jika pengguna mengklik kanan pada skrin untuk memuat semula, atau menekan kekunci F5 untuk memuat semula halaman, fungsi pengesahan kata laluan skrin kunci akan dipintas. Ini boleh dicapai dengan menghalang pelaksanaan lalai F5 dan butang kanan tetikus.

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

Kaedah terakhir dipanggil:

Salin kod Kod adalah seperti berikut:

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

Saya harap artikel ini akan membantu reka bentuk pengaturcaraan JavaScript semua orang.