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 控制 html元素 显示/隐藏实现代码
Sep 01 Javascript
通过onmouseover选项卡实现img图片的变化
Feb 12 Javascript
ie 7/8不支持trim的属性的解决方案
May 23 Javascript
jQuery中的read和JavaScript中的onload函数的区别
Aug 27 Javascript
javascript适合移动端的日期时间拾取器
Nov 10 Javascript
jquery $.trim()去除字符串空格的实现方法【附图例】
Mar 30 Javascript
Javascript缓存API
Jun 14 Javascript
基于vue2.0+vuex+localStorage开发的本地记事本示例
Feb 28 Javascript
bootstrap与pagehelper实现分页效果
Dec 29 Javascript
点击按钮弹出模态框的一系列操作代码实例
Mar 29 Javascript
详解js中let与var声明变量的区别
Apr 05 Javascript
Vue全家桶入门基础教程
May 14 Vue.js
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
咖啡与牛奶
2021/03/03 冲泡冲煮
php摘要生成函数(无乱码)
2012/02/04 PHP
PHP实现微信支付(jsapi支付)流程步骤详解
2018/03/15 PHP
如何用javascript去掉字符串里的所有空格
2007/02/08 Javascript
IE6弹出“已终止操作”的解决办法
2010/11/27 Javascript
js变量、作用域及内存详解
2014/09/23 Javascript
JavaScript学习笔记之内置对象
2015/01/22 Javascript
JavaScript对象参数的引用传递
2016/01/14 Javascript
JS中innerHTML和pasteHTML的区别实例分析
2016/06/22 Javascript
jquery之别踩白块游戏的简单实现
2016/07/25 Javascript
vue生成随机验证码的示例代码
2017/09/29 Javascript
JS中常用的消息框总结
2018/02/24 Javascript
JavaScript数值类型知识汇总
2019/11/17 Javascript
JSON 入门教程基础篇 json入门学习笔记
2020/09/22 Javascript
[02:40]2014DOTA2 国际邀请赛中国区预选赛 四大豪门抵达华西村
2014/05/23 DOTA
[54:29]2018DOTA2亚洲邀请赛 4.7 淘汰赛 VP vs LGD 第二场
2018/04/09 DOTA
浅谈Python爬虫基本套路
2019/03/25 Python
python中yield的用法详解——最简单,最清晰的解释
2019/04/04 Python
Python实现多态、协议和鸭子类型的代码详解
2019/05/05 Python
pow在python中的含义及用法
2019/07/11 Python
python用requests实现http请求代码实例
2019/10/31 Python
python 浅谈serial与stm32通信的编码问题
2019/12/18 Python
python中如何使用insert函数
2020/01/09 Python
解决python DataFrame 打印结果不换行问题
2020/04/09 Python
在python中利用pycharm自定义代码块教程(三步搞定)
2020/04/15 Python
雅诗兰黛(Estee Lauder)英国官方网站:世界顶级化妆品牌
2016/12/29 全球购物
俄罗斯最大的在线珠宝大卖场:Nebo
2019/12/08 全球购物
数学系毕业生的自我评价
2014/01/10 职场文书
市委召开党的群众路线教育实践活动总结大会报告
2014/10/21 职场文书
教师工作表现评语
2014/12/31 职场文书
4S店收银员岗位职责
2015/04/07 职场文书
python urllib库的使用详解
2021/04/13 Python
Golang二维数组的使用方式
2021/05/28 Golang
JavaScript模拟实现网易云轮播效果
2022/04/04 Javascript
Java设计模式之代理模式
2022/04/22 Java/Android
Windows Server 2012配置DNS服务器的方法
2022/04/29 Servers