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 相关文章推荐
javascript 得到变量类型的函数
May 19 Javascript
jQuery实战之仿淘宝商城左侧导航效果
Apr 12 Javascript
js写一个字符串转成驼峰的实例
Jun 21 Javascript
JavaScript调用浏览器打印功能实例分析
Jul 17 Javascript
JavaScript的History API使搜索引擎抓取AJAX内容
Dec 07 Javascript
js实现页面跳转的五种方法推荐
Mar 10 Javascript
功能强大的Bootstrap效果展示(二)
Aug 03 Javascript
详解vue.js的事件处理器v-on:click
Jun 27 Javascript
原生JS上传大文件显示进度条 php上传文件代码
Mar 27 Javascript
jQuery zTree搜索-关键字查询 递归无限层功能实现代码
Jan 25 jQuery
使用Vuex解决Vue中的身份验证问题
Sep 28 Javascript
js实现3D粒子酷炫动态旋转特效
Sep 13 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
Access数据库导入Mysql的方法之一
2006/10/09 PHP
请离开include_once和require_once
2013/07/18 PHP
php实现中文字符截取防乱码方法汇总
2015/04/29 PHP
PHP实现连接设备、通讯和发送命令的方法
2015/10/13 PHP
Angularjs 基础入门
2014/12/26 Javascript
javascript 闭包详解
2015/07/02 Javascript
JavaScript中数组的合并以及排序实现示例
2015/10/24 Javascript
JavaScript希尔排序、快速排序、归并排序算法
2016/05/08 Javascript
微信小程序 使用picker封装省市区三级联动实例代码
2016/10/28 Javascript
基于bootstrap的文件上传控件bootstrap fileinput
2016/12/23 Javascript
JS闭包用法实例分析
2017/03/27 Javascript
js调用刷新界面的几种方式
2017/05/03 Javascript
移动端效果之Swiper详解
2017/10/09 Javascript
基于ajax及jQuery实现局部刷新过程解析
2020/09/12 jQuery
[02:39]DOTA2英雄基础教程 极限穿梭编织者
2013/12/05 DOTA
[59:48]LGD vs IG 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
python通过pil为png图片填充上背景颜色的方法
2015/03/17 Python
python3解析库pyquery的深入讲解
2018/06/26 Python
python爬取哈尔滨天气信息
2018/07/14 Python
python 2.7 检测一个网页是否能正常访问的方法
2018/12/26 Python
python自定义线程池控制线程数量的示例
2019/02/22 Python
解决python3中的requests解析中文页面出现乱码问题
2019/04/19 Python
Python爬取知乎图片代码实现解析
2019/09/17 Python
python中的TCP(传输控制协议)用法实例分析
2019/11/15 Python
numpy.linalg.eig() 计算矩阵特征向量方式
2019/11/29 Python
Python面向对象实现方法总结
2020/08/12 Python
分享一个python的aes加密代码
2020/12/22 Python
tensorflow与numpy的版本兼容性问题的解决
2021/01/08 Python
会计专业职业规划:规划自我赢取未来
2014/02/12 职场文书
艺校音乐专业自我鉴定范文
2014/03/01 职场文书
目标管理责任书
2014/04/15 职场文书
群众路线查摆问题整改措施
2014/10/10 职场文书
幼师大班个人总结
2015/02/13 职场文书
个人催款函范文
2015/06/23 职场文书
欠条格式范本
2015/07/03 职场文书
Vue Mint UI mt-swipe的使用方式
2022/06/05 Vue.js