js实现简单锁屏功能实例

这篇文章主要介绍了js实现简单锁屏功能的方法,实例分析了javascript操作页面元素显示与隐藏的相关技巧,涉及javascript操作元素属性与鼠标、键盘事件的相关技巧,需要的朋友可以参考下

本文实例讲述了js实现简单锁屏功能的方法。分享给大家供大家参考。具体实现方法如下：

1. //********* 锁屏DIV *************************** 
2. function LockScreen(tag,title,width,height,url) 
3. { 
4. if (tag) //锁屏 
5. { 
6. var lockdiv = document.getElementById("lockscreen"); 
7. if (lockdiv!=null) 
8. { 
9. lockdiv.style.display = "block"; 
10. var subdiv = document.getElementById("subdialog"); 
11. if (subdiv!=null) 
12. { 
13. subdiv.style.display = "block"; 
14. document.getElementById("dialog1").src = url; 
15. }  
16. }else{ 
17. //创建新的锁屏DIV,并执行锁屏 
18. var tabframe= document.createElement("div"); 
19. tabframe.id = "lockscreen"; 
20. tabframe.name = "lockscreen"; 
21. tabframe.style.top = '0px'; 
22. tabframe.style.left = '0px'; 
23. tabframe.style.height = '100%'; 
24. tabframe.style.width = '100%'; 
25. tabframe.style.position = "absolute"; 
26. tabframe.style.filter = "Alpha(opacity=10)"; 
27. tabframe.style.backgroundColor="#000000"; 
28. tabframe.style.zIndex = "99998"; 
29. document.body.appendChild(tabframe); 
30. tabframe.style.display = "block"; 
31. //子DIV 
32. var subdiv = document.createElement("div"); 
33. subdiv.id = "subdialog"; 
34. subdiv.name = "subdialog"; 
35. subdiv.style.top = Math.round((tabframe.clientHeight-height)/2); 
36. subdiv.style.left = Math.round((tabframe.clientWidth-width)/2); 
37. subdiv.style.height = height+'px'; 
38. subdiv.style.width = width+'px'; 
39. subdiv.style.position = "absolute"; 
40. subdiv.style.backgroundColor="#000000";  
41. subdiv.style.zIndex = "99999"; 
42. subdiv.style.filter = "Alpha(opacity=100)"; 
43. subdiv.style.border = "1px"; 
44. //subdiv.onmousemove = mouseMoveDialog; 
45. //subdiv.onmousedown = control_onmousedown; 
46. //subdiv.onmouseup = mouseUp; 
47. document.body.appendChild(subdiv); 
48. subdiv.style.display = "block"; 
49. //subdiv.onclick=UNLockScreen; 
50. var iframe_height = height-30; 
51. var titlewidth = width; 
52. var html = "<table border='0' cellpadding='0' cellspacing='0'>" 
53. html += "<tr><td></td><td>"; 
54. 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>"; 
55. html += "</td><td></td></tr>"; 
56. 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>"; 
57. html += "<td></td><td></td><td></td>"; 
58. html += "</table>"; 
59. subdiv.innerHTML = html; 
60. } 
61. }else{ 
62. //解屏 
63. var lockdiv = document.getElementById("lockscreen"); 
64. if (lockdiv!=null) 
65. { 
66. lockdiv.style.display = "none"; 
67. } 
68. var subdiv = document.getElementById("subdialog"); 
69. if (subdiv!=null) 
70. { 
71. subdiv.style.display = "none"; 
72. } 
73. } 
74. } 
75. function UNLockScreen(){ 
76. LockScreen(false); 
77. } 

如果大家不知道什么是锁屏，可以去163信箱看一看，用途是你要离开屏幕一段时间时可以暂时锁住屏幕保留工作空间。带回来只要重新输入密码验证即可恢复到原先的工作空间。

一般都是通过在页面上增加不透明遮罩层实现锁屏功能，或者是使用两个区域互相显示隐藏。使用框架(frame)构建的网站如果要实现锁屏功能则很有难度。因为在框架页面无法使用div做层。而且框架也不支持css的display:none;属性。

最后的实现方法是使用在FRAMESET内再增加一个frame，出事状态时FRAMESET的rows属性将新增加的frame设置为高度为0。点击锁屏按钮时，则将FRAMESET中其他的frame的高度设置为0，将新增的frame高度设置为*。这样我们就完成了frame的替换功能。解锁后将 FRAMESET的rows属性重新设置为初始值，屏幕恢复到原状态。

这样并没有结束。如果用户在屏幕上使用右键刷新，或者按F5键刷新页面，就会绕过锁屏的密码校验功能。可以通过阻止F5和鼠标右键的默认实现达到目的。

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

最后调用的方法:

希望本文所述对大家的javascript程序设计有所帮助。