javascript实现锁定网页、密码解锁效果(类似系统屏幕保护效果)


Posted in Javascript onAugust 15, 2014

功能描述:打开一个网站的网页,过5分钟不动作,就会锁定页面,隐藏内容容器,显示一个容器用于输入密码,输入正确的密码来解锁。锁定后即使用户刷新页面,还是保留原来的状态。如已经锁定的,需要继续锁定,否则显示内容。
 
示例代码如下,通过document.onmouseover来实现多少分钟没有动作,使用计时器来实现。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>javascript实现系统屏幕保护效果(锁定网页)</title>
</head>

<body>
<div id="dvContent">内容<br />内容<br />内容<br />内容<br />内容<br />内容</div>
<div id="dvPassword" style="display:none">输入密码:<input type="password" id="txtPwd" /><input type="button" value="确定" onclick="check()"/></div>
<script>
  if (document.cookie.indexOf('lock=1') != -1) ShowContent(false);
  var delay = 10 * 1000,timer;//10s后锁定,修改delay为你需要的时间,单位毫秒
  function startTimer() {
    clearTimeout(timer);
    timer = setTimeout(TimerHandler, delay);
  }
  function TimerHandler() {
    document.cookie = 'lock=1';
    document.onmousemove = null;//锁定后移除鼠标移动事件
    ShowContent(false);
  }
  function ShowContent(show) {
    document.getElementById('dvContent').style.display = show ? 'block' : 'none';
    document.getElementById('dvPassword').style.display = show ? 'none' : 'block';
  }
  function check() {
    if (document.getElementById('txtPwd').value == '123') {
      document.cookie = 'lock=0';
      ShowContent(true);
      startTimer()//重新计时
      document.onmousemove = startTimer; //重新绑定鼠标移动事件
    }
    else alert('密码不正确!!');
  }
  window.onload = function () {
    document.onmousemove = startTimer;
    startTimer();
  }
</script>
</body>
</html>
Javascript 相关文章推荐
网上抓的一个特效
May 11 Javascript
jquery tablesorter.js 支持中文表格排序改进
Dec 09 Javascript
javascript获取下拉列表框当中的文本值示例代码
Jul 31 Javascript
jQuery父级以及同级元素查找介绍
Sep 04 Javascript
node.js中的fs.fchown方法使用说明
Dec 16 Javascript
JavaScript里四舍五入函数round用法实例
Apr 06 Javascript
JQ选择器_选择同类元素的第N个子元素的实现方法
Sep 08 Javascript
微信小程序实战之自定义toast(6)
Apr 18 Javascript
微信小程序template模板与component组件的区别和使用详解
May 22 Javascript
微信小程序 wxParse插件显示视频问题
Sep 27 Javascript
vue简单封装axios插件和接口的统一管理操作示例
Feb 02 Javascript
js实现拖拽元素选择和删除
Aug 25 Javascript
javascript使用window.open提示“已经计划系统关机”的原因
Aug 15 #Javascript
Ext4.2的Ext.grid.plugin.RowExpander无法触发事件解决办法
Aug 15 #Javascript
javascript中的__defineGetter__和__defineSetter__介绍
Aug 15 #Javascript
js 判断图片是否加载完以及实现图片的预下载
Aug 14 #Javascript
js创建表单元素并使用submit进行提交
Aug 14 #Javascript
使用typeof判断function是否存在于上下文
Aug 14 #Javascript
java、javascript实现附件下载示例
Aug 14 #Javascript
You might like
PHP制作图型计数器的例子
2006/10/09 PHP
php上传图片类及用法示例
2016/05/11 PHP
多个iframe自动调整大小的问题
2006/09/18 Javascript
比较全面的event对像在IE与FF中的区别 推荐
2009/09/21 Javascript
通过javascript获取iframe里的值示例代码
2013/06/24 Javascript
js闭包实例汇总
2014/11/09 Javascript
兼容主流浏览器的JS复制内容到剪贴板
2014/12/12 Javascript
javascript正则表达式总结
2016/02/29 Javascript
AngularJS基础 ng-dblclick 指令用法
2016/08/01 Javascript
基于JavaScript实现Tab选项卡切换效果
2016/11/24 Javascript
vue 封装 Adminlte3组件的实现
2020/03/18 Javascript
微信小程序点击生成朋友圈分享图(遇到的坑)
2020/06/17 Javascript
nodejs使用Sequelize框架操作数据库的实现
2020/10/21 NodeJs
创建与框架无关的JavaScript插件
2020/12/01 Javascript
Python json模块使用实例
2015/04/11 Python
基于python yield机制的异步操作同步化编程模型
2016/03/18 Python
Python制作Windows系统服务
2017/03/25 Python
django项目搭建与Session使用详解
2018/10/10 Python
Python闭包思想与用法浅析
2018/12/27 Python
django 连接数据库出现1045错误的解决方式
2020/05/14 Python
Django自关联实现多级联动查询实例
2020/05/19 Python
Tensorflow之MNIST CNN实现并保存、加载模型
2020/06/17 Python
Python基于xlrd模块处理合并单元格
2020/07/28 Python
python实现磁盘日志清理的示例
2020/11/05 Python
Koral官方网站:女性时尚运动服
2019/04/10 全球购物
Lookfantastic意大利官网:英国知名美妆购物网站
2019/05/31 全球购物
《颐和园》教学反思
2014/02/26 职场文书
技术合作协议书范本
2014/04/18 职场文书
食品安全承诺书
2014/05/22 职场文书
工厂门卫的岗位职责
2014/07/27 职场文书
无犯罪记录证明样本
2015/06/16 职场文书
CSS Transition通过改变Height实现展开收起元素
2021/08/07 HTML / CSS
使用jpa之动态插入与修改(重写save)
2021/11/23 Java/Android
JVM的类加载器和双亲委派模式你了解吗
2022/03/13 Java/Android
什么是css原子化,有什么用?
2022/04/24 HTML / CSS
Redis 限流器
2022/05/15 Redis