javascript实现锁定网页、密码解锁效果(类似系统屏幕保护效果)
功能描述:打开一个网站的网页,过5分钟不动作,就会锁定页面,隐藏内容容器,显示一个容器用于输入密码,输入正确的密码来解锁。锁定后即使用户刷新页面,还是保留原来的状态。如已经锁定的,需要继续锁定,否则显示内容。
示例代码如下,通过document.onmouseover来实现多少分钟没有动作,使用计时器来实现。
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title>javascript实现系统屏幕保护效果(锁定网页)</title>
</head>
<body>
<divid="dvContent">内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容</div>
<divid="dvPassword"style="display:none">输入密码:<inputtype="password"id="txtPwd"/><inputtype="button"value="确定"onclick="check()"/></div>
<script>
if(document.cookie.indexOf('lock=1')!=-1)ShowContent(false);
vardelay=10*1000,timer;//10s后锁定,修改delay为你需要的时间,单位毫秒
functionstartTimer(){
clearTimeout(timer);
timer=setTimeout(TimerHandler,delay);
}
functionTimerHandler(){
document.cookie='lock=1';
document.onmousemove=null;//锁定后移除鼠标移动事件
ShowContent(false);
}
functionShowContent(show){
document.getElementById('dvContent').style.display=show?'block':'none';
document.getElementById('dvPassword').style.display=show?'none':'block';
}
functioncheck(){
if(document.getElementById('txtPwd').value=='123'){
document.cookie='lock=0';
ShowContent(true);
startTimer()//重新计时
document.onmousemove=startTimer;//重新绑定鼠标移动事件
}
elsealert('密码不正确!!');
}
window.onload=function(){
document.onmousemove=startTimer;
startTimer();
}
</script>
</body>
</html>