js實現簡單鎖屏功能實例

 　　本文實例講述了js實現簡單鎖屏功能的方法。分享給大家供大家參考。具體實現方法如下：

　　?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 //********* 鎖屏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和鼠標右鍵的默認實現達到目的。

　　?

1 2 3 4 5 6 7 8 //阻止F5或者鼠標右鍵刷新,使鎖屏失效。 document.onkeydown = function(){ if(event.keyCode==116) { event.keyCode=0; event.returnValue = false; } } document.oncontextmenu = function() {event.returnValue = false;}

　　最後調用的方法:

　　復制代碼 代碼如下:

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

　　希望本文所述對大家的javascript程序設計有所幫助。