本文介绍了一种使用JavaScript实现的网页锁定与解锁功能。通过设置和读取cookie来记录锁定状态，并利用DOM操作显示或隐藏特定元素以实现锁定效果。用户可通过输入正确的密码解锁。
http://www.ajaxbbs.net/ymPrompt2.0/#entrymore
<SCRIPT language="javascript">
<!--
function lock(menu) //锁定函数
{menu.style.display="none"?'':''; //打开蒙版
document.cookie="lock=yes"; //设置cookies,使锁定长期有效,
lockpwd.focus(); //密码框直接获取焦点
}
function unlock(menu) //解锁函数
{
menu.style.display=""?'none':'none'; //去除蒙版,达到解锁
document.cookie="lock=no"; //设置cookie
return false;
}
function cklock() //对输入的密码进行验证
{
if (lockpwd.value==getcookie('lockpwd')) //验证密码与cookie密码
{ unlock(lockform);}
else
{alert("密码错误,请重新输入!");
lockpwd.value="";
lockpwd.focus();
return false;}
}
function getcookie(name) //获取cookies,用来验证输入的密码
{
var aCookie = document.cookie.split("; "); //取得所有cookies,并放置到数组中:[cookie名=值]
for (var i=0; i < aCookie.length; i++) //遍历所有cookies
{
aCrumb = aCookie[i].split("="); //将cookie名和值分开
if (name==aCrumb[0]) //验证cookie名
{ return aCrumb[1]; } //返回cookie值
}
}
-->
</script>
<style>
<!--
body{overflow-y:visible;overflow-x:visible; }
body,div,input{text-align:center;font-size:10pt;font-face:微软雅黑;}
input{height:20;}
#lockbtn{float:left;margin-left:50px;cursor:hand;}
#lockform,#locklayer{
position: absolute;
width:expression(this.parentNode.scrollWidth);
top:expression(this.parentNode.scrollTop);
left=0; height:100%;right:0; bottom:0;
}
#lockform { z-index:1}
#locklayer{ z-index:1;background-color:#AAA;filter:alpha(opacity=50);}
#locktab{
position: absolute;
top:250px;left:expression(this.parentNode.scrollWidth/2-100);
background-color:#FDFEFF; z-index:2;width:200px;height:60px;
border-style: solid; border-width: 1px;border-color:green;color:red;
}
#lockck{border:0;background:fff;color:red;}
-->
</style>
<body>
<div id="lockbtn" onclick="lock(lockform);">锁定</div>
<div id="lockform" style="display:none;">
<div id="locklayer"></div>
<div id="locktab">
<input id="lockck" type="submit" value="请输入解锁密码:" onfocus="cklock();" >
<div><input id="lockpwd" type="password" name="lockpwd" onfocus="this.value=''" size=16></div>
</div>
</div>
</body>
扫一扫
2027
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
