js实现简单锁屏功能实例
本⽂实例讲述了js实现简单锁屏功能的⽅法。分享给⼤家供⼤家参考。具体实现⽅法如下：
//********* 锁屏DIV ***************************
function LockScreen(tag,title,width,height,url)
{
if (tag) //锁屏
{
var lockdiv = ElementById("lockscreen");
if (lockdiv!=null)
{
lockdiv.style.display = "block";
var subdiv = ElementById("subdialog");
if (subdiv!=null)
{
subdiv.style.display = "block";
}
}else{
//创建新的锁屏DIV，并执⾏锁屏
var tabframe= ateElement("div");
tabframe.id = "lockscreen";
tabframe.name = "lockscreen";
p = '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 = ateElement("div");
subdiv.id = "subdialog";
subdiv.name = "subdialog";
p = und((tabframe.clientHeight-height)/2);
subdiv.style.left = und((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";
//usemove = mouseMoveDialog;
//usedown = control_onmousedown;
//useup = mouseUp;
document.body.appendChild(subdiv);
subdiv.style.display = "block";
//lick=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 = ElementById("lockscreen");
if (lockdiv!=null)
{
lockdiv.style.display = "none";
}
var subdiv = ElementById("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或者⿏标右键刷新，使锁屏失效。
if(event.keyCode==116) {
event.keyCode=0;
}
}
最后调⽤的⽅法:
复制代码代码如下:
LockScreen(true,'标题',424,314,'www.baidu');
js制作简单的焦点图效果
希望本⽂所述对⼤家的javascript程序设计有所帮助。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。