这篇文章主要介绍了 js 实现简单锁屏功能的方法, 实例分析了 javascript 操作页面元素显示与隐藏的相关技巧, 涉及 javascript 操作元素属性与鼠标、键盘事件的相关技巧, 需要的朋友可以参考下
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
本文实例讲述了 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;
- }
最后调用的方法:
- LockScreen(true,'标题',424,314,'http://www.baidu.com');
希望本文所述对大家的 javascript 程序设计有所帮助。
来源: