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 三种不同位置代码的写法
Oct 25 Javascript
JavaScript Perfection kill 测试及答案
Mar 23 Javascript
jquery(live)中File input的change方法只起一次作用的解决办法
Oct 21 Javascript
javascript学习笔记(六) Date 日期类型
Jun 19 Javascript
js使用数组判断提交数据是否存在相同数据
Nov 27 Javascript
javascript实现dom动态创建省市纵向列表菜单的方法
May 14 Javascript
详解JavaScript中的every()方法
Jun 08 Javascript
jquery实现平滑的二级下拉菜单效果
Aug 26 Javascript
webpack学习笔记之代码分割和按需加载的实例详解
Jul 20 Javascript
浅谈angular4 ng-content 中隐藏的内容
Aug 18 Javascript
浅谈vue中$bus的使用和涉及到的问题
Jul 28 Javascript
vue-simple-uploader上传成功之后的response获取代码
Sep 07 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中使用redis
2013/11/04 PHP
php使用类继承解决代码重复的问题
2015/02/11 PHP
PHP模拟asp.net的StringBuilder类实现方法
2015/08/08 PHP
phpinfo() 中 Local Value(局部变量)Master Value(主变量) 的区别
2016/02/03 PHP
PHP的Yii框架入门使用教程
2016/02/15 PHP
CodeIgniter针对数据库的连接、配置及使用方法
2016/03/03 PHP
php Session无效分析资料整理
2016/11/29 PHP
PHP实现链式操作的三种方法详解
2017/11/16 PHP
Yii框架ACF(accessController)简单权限控制操作示例
2019/04/26 PHP
浅谈laravel aliases别名的原理
2019/10/24 PHP
告诉大家什么是JSON
2008/06/10 Javascript
js实现动态改变字体大小代码
2014/01/02 Javascript
JQuery实现的购物车功能(可以减少或者添加商品并自动计算价格)
2015/01/13 Javascript
JS简单实现动画弹出层效果
2015/05/05 Javascript
Bootstrap实现导航栏的2种方式
2016/11/28 Javascript
js原生代码实现轮播图的实例讲解
2017/07/28 Javascript
详解Vue微信公众号开发踩坑全记录
2017/08/21 Javascript
JS随机排序数组实现方法分析
2017/10/11 Javascript
基于casperjs和resemble.js实现一个像素对比服务详解
2018/01/10 Javascript
React diff算法的实现示例
2018/04/20 Javascript
微信小程序页面缩放式侧滑效果的实现代码
2018/11/15 Javascript
JavaScript canvas基于数组生成柱状图代码实例
2020/03/06 Javascript
解决uWSGI的编码问题详解
2017/03/24 Python
Python Xml文件添加字节属性的方法
2018/03/31 Python
Python 解决中文写入Excel时抛异常的问题
2018/05/03 Python
深入浅析Python获取对象信息的函数type()、isinstance()、dir()
2018/09/17 Python
在Python中获取两数相除的商和余数方法
2018/11/10 Python
python 爬取古诗文存入mysql数据库的方法
2020/01/08 Python
浅谈python出错时traceback的解读
2020/07/15 Python
Python根据URL地址下载文件并保存至对应目录的实现
2020/11/15 Python
Python爬虫设置Cookie解决网站拦截并爬取蚂蚁短租的问题
2021/02/22 Python
德国高性价比网上药店:medpex
2017/07/09 全球购物
大型晚会策划方案
2014/02/06 职场文书
通信工程专业求职信
2014/06/04 职场文书
师德师风事迹材料
2014/12/20 职场文书
星际争霸 Light vs Action 一场把教主看到鬼畜的比赛
2022/04/01 星际争霸