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 相关文章推荐
dwr spring的集成实现代码
Mar 22 Javascript
Jquery插件之多图片异步上传
Oct 20 Javascript
根据经纬度计算地球上两点之间的距离js实现代码
Mar 05 Javascript
js中继承的几种用法总结(apply,call,prototype)
Dec 26 Javascript
将数字转换成大写的人民币表达式的js函数
Sep 21 Javascript
原生js结合html5制作小飞龙的简易跳球
Mar 30 Javascript
纯JavaScript代码实现移动设备绘图解锁
Oct 16 Javascript
5个最顶级jQuery图表类库插件【jquery插件库】
May 05 Javascript
JavaScript使用正则表达式获取全部分组内容的方法示例
Jan 17 Javascript
jquery无缝图片轮播组件封装
Nov 25 jQuery
微信公众号服务器验证Token步骤图解
Dec 30 Javascript
vue-calendar-component 封装多日期选择组件的实例代码
Dec 04 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
用PHP函数解决SQL injection
2006/10/09 PHP
Linux环境下php实现给网站截图的方法
2016/05/03 PHP
laravel-admin 实现给grid的列添加行数序号的方法
2019/10/08 PHP
用javascript实现读取txt文档的脚本
2007/07/20 Javascript
TextArea不支持maxlength的解决办法(jquery)
2011/09/13 Javascript
pace.js页面加载进度条插件
2015/09/29 Javascript
JS设置cookie、读取cookie
2016/02/24 Javascript
jquery实现提示语淡入效果
2017/05/05 jQuery
详解a++和++a的区别
2017/08/30 Javascript
CSS3结合jQuery实现动画效果及回调函数的实例
2017/12/27 jQuery
Node.js Express安装与使用教程
2018/05/11 Javascript
JavaScript中的相等操作符使用详解
2019/12/21 Javascript
vue中watch和computed为什么能监听到数据的改变以及不同之处
2019/12/27 Javascript
原生js实现文件上传、下载、封装等实例方法
2020/01/05 Javascript
JavaScript实现轮播图片完整代码
2020/03/07 Javascript
js实现日历
2020/11/07 Javascript
JavaScript实现切换多张图片
2021/01/27 Javascript
[03:55]2014DOTA2国际邀请赛 Fnatic经理采访赢DK在情理之中
2014/07/10 DOTA
[02:41]《西雅图我们来了》2015国际邀请赛出征全记录
2015/07/23 DOTA
在Django框架中编写Context处理器的方法
2015/07/20 Python
PHP网页抓取之抓取百度贴吧邮箱数据代码分享
2016/04/13 Python
python实现决策树分类(2)
2018/08/30 Python
python爬取指定微信公众号文章
2018/12/20 Python
Python3离线安装Requests模块问题
2019/10/13 Python
浅谈spring boot 集成 log4j 解决与logback冲突的问题
2020/02/20 Python
HTML5中微数据概述及在搜索引擎中的使用举例
2013/02/07 HTML / CSS
HTML5实现签到 功能
2018/10/09 HTML / CSS
土耳其国际性时尚购物网站:Modanisa
2018/01/19 全球购物
澳大利亚领先的在线药房:Pharmacy Online(有中文站)
2020/02/22 全球购物
计算机通信专业推荐信
2014/02/22 职场文书
社区活动总结报告
2014/05/05 职场文书
学生自我鉴定格式及范文
2014/09/16 职场文书
2015年财务人员个人工作总结
2015/07/27 职场文书
python基于opencv批量生成验证码的示例
2021/04/28 Python
python源码剖析之PyObject详解
2021/05/18 Python
进阶篇之linux环境下安装MySQL数据库
2022/04/09 MySQL