首页登陆欢迎您!
首页登陆 > 运维知识 > js实现简单锁屏功能实例_javascript技巧_脚本之家

js实现简单锁屏功能实例_javascript技巧_脚本之家

时间:2019-12-06

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

//********* 锁屏DIV ***************************function LockScreen(tag,title,width,height,url){ if  //锁屏 { var lockdiv = document.getElementById; if  { lockdiv.style.display = "block"; var subdiv = document.getElementById; if  { subdiv.style.display = "block"; document.getElementById.src = url; } }else{ //创建新的锁屏DIV,并执行锁屏 var tabframe= document.createElement; 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"; tabframe.style.backgroundColor="#000000"; tabframe.style.zIndex = "99998"; document.body.appendChild; tabframe.style.display = "block"; //子DIV var subdiv = document.createElement; 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"; subdiv.style.border = "1px"; //subdiv.onmousemove = mouseMoveDialog; //subdiv.onmousedown = control_onmousedown; //subdiv.onmouseup = mouseUp; document.body.appendChild; subdiv.style.display = "block"; //subdiv.onclick=UNLockScreen; var iframe_height = height-30; var titlewidth = width; var html = "

" html += "

"; html += "

"+title+"

"; html += "

"; html += "

"; html += "

"; html += "

"; subdiv.innerHTML = html; } }else{ //解屏 var lockdiv = document.getElementById; if { lockdiv.style.display = "none"; } var subdiv = document.getElementById; if { subdiv.style.display = "none"; } }}function UNLockScreen;}

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

一般都是通过在页面上增加不透明遮罩层实现锁屏功能,或者是使用两个区域互相显示隐藏。使用框架构建的网站如果要实现锁屏功能则很有难度。因为在框架页面无法使用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=0; event.returnValue = false; }}document.oncontextmenu = function() {event.returnValue = false;}

复制代码 代码如下:LockScreen(true,'标题',424,314,'');

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

上一篇:jQuery实现限制textarea文本框输入字符数量的方法_jquery_脚本之家 下一篇:没有了