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>