javascript实现锁定网页、密码解锁效果(类似系统屏幕保护效果)
2023-06-13 09:15:42 时间
功能描述:打开一个网站的网页,过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>
相关文章
- javascript 高级教程 视频_精通JavaScript
- [javascript] js如何获取浏览器的语言
- javascript实现表单提交加密「建议收藏」
- JavaScript学习总结(九)——Javascript面向(基于)对象编程详解编程语言
- javascript引用对象的方法代码
- Javascript更新JavaScript数组的uniq方法
- JavaScript入门教程(1)什么是JS
- javascript写类方式之一
- javascript一些用法小结
- JavaScript让IE浏览器event对象符合W3CDOM标准
- javascript表单验证-Parsley.js使用和配置
- JavaScript实现页面实时显示当前时间的简单实例
- javascript中的变量作用域以及变量提升详细介绍
- javascript实现十六进制颜色值(HEX)和RGB格式相互转换