js實現簡單鎖屏功能實例

2024-05-06 16:20:54

字體：大中小

來源：轉載

供稿：網友

這篇文章主要介紹了js實現簡單鎖屏功能的方法,實例分析了javascript操作頁面元素顯示與隱藏的相關技巧,涉及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信箱看一看，用途是你要離開屏幕一段時間時可以暫時鎖住屏幕保留工作空間。帶回來只要重新輸入密碼驗證即可恢復到原先的工作空間。

一般都是通過在頁面上增加不透明遮罩層實現鎖屏功能，或者是使用兩個區域互相顯示隱藏。使用框架(frame)構建的網站如果要實現鎖屏功能則很有難度。因為在框架頁面無法使用div做層。而且框架也不支持css的display:none;屬性。

最后的實現方法是使用在FRAMESET內再增加一個frame，出事狀態時FRAMESET的rows屬性將新增加的frame設置為高度為0。點擊鎖屏按鈕時，則將FRAMESET中其他的frame的高度設置為0，將新增的frame高度設置為*。這樣我們就完成了frame的替換功能。解鎖后將 FRAMESET的rows屬性重新設置為初始值，屏幕恢復到原狀態。

這樣并沒有結束。如果用戶在屏幕上使用右鍵刷新，或者按F5鍵刷新頁面，就會繞過鎖屏的密碼校驗功能?？梢酝ㄟ^阻止F5和鼠標右鍵的默認實現達到目的。

//阻止F5或者鼠標右鍵刷新,使鎖屏失效。

document.onkeydown = function(){

if(event.keyCode==116) {

event.keyCode=0;

event.returnValue = false;

}

}

document.oncontextmenu = function() {event.returnValue = false;}