javascript实现锁定网页、密码解锁效果（类似系统屏幕保护效果）
作者：junjie 发布时间：2023-08-18 20:01:36
标签：javascript,锁定网页,密码解锁,屏幕保护效果
功能描述：打开一个网站的网页，过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>
0
投稿猜你喜欢
- 在程序的开发过程中，处理分页是大家接触比较频繁的事件，因为现在软件基本上都是与数据库进行挂钩的。但效率又是我们所追求的，如果是像原来那样把所
- 清除浮动这个问题的提出，在现在来说应该算是一个非常古老的问题了，很多人对解决办法估计也能烂记于心了，但是我这个落后了不少的前端开发程序员，太
- 因为神奇的中文有时也是会遇到国外同学都不知道原因导致一些神奇滴问题，所以要用更神奇的英文来解决问题。Mac OS的一些：华文细黑：STHei
- 仿windows选项卡或叫做tabpan以及tabpage，现在还有最新的进展譬如仿淘宝网导航菜单效果皆属于此类：运行代码框<scri
最近关于浏览器的最重要的事情就是IE的极光0day漏洞了，这个漏洞导致包括Google在内的多家美国公司受到黑客的攻击，当然也有很多网站被黑- 1.网页背景色的设置 犯错机率：很大普遍性：较广犯错可能性：懒/不知道约2年前我曾发现21cn上出现过一次没有设置背景色的情况，当时我用Em
- 1.提示窗口，当页面被打开时就弹出提示窗口。<style type="text/css"> body { b
- PHP PDO 预处理语句与存储过程很多更成熟的数据库都支持预处理语句的概念。什么是预处理语句？可以把它看作是想要运行的 SQL 的一种编译
- 第一步：创建转向控制页面创建网站默认的首页文件（通常为"index.asp"或"default.asp&quo
- ASP编写完整的一个IP所在地搜索类的修正文稿修正了查询方法，查询的方法和追捕的一致；只是追捕会自动更正IP。还有个函数的书写错误，也已经修
- 引言提到 numpy 的数组操作，我们就不得不说到 np.concatenate() 函数，concatenate 一词在英文中是级联的意思
- 前言终于下定决心学习Python了。既然从头开始，就需要认认真真。首先需要说的是，我是初学Python，这篇文章只是用于展示global和n
- 这个效果前些日子有人在论坛问起，今天有空研究了下。我打了原创标记，因为我在写这个方法时的确没有参考过别人的代码。我的方法其实就是层遮罩加AL
- 1、善用css缩写可以减少页面文件大小，提高下载速度，同时使代码简洁可读。代码:div{ b
- 当你准备全面进军web标准时，有时候你是不是被表格的弄得焦头烂额呢？比如，原来使用“非法”的nobr现在要用什么来代替呢？今天，就让我来一个
- MySQL安全性指南(2) 作 者： 晏子2.1.3 数据库和表权限下列权限运用于数据库和表上的操作。ALTER允许你使用ALTER TAB
- 本文是关于人物角色的一些简单介绍，感谢瑶芝同学提供的大力帮助！ 人物角色（Personas）作为一种技术
- Ewebeditor及fckeditork，90％的网站都是采用这两种编辑器作为产品或者内容的说明部分的编辑窗口，近日，一客户的外贸站点基本
- PDOStatement::bindValuePDOStatement::bindValue — 把一个值绑定到一个参数(PHP 5 >
- 靓丽的网页是怎样生成的？也许您会脱口而出，当然是自己设计出来的。没错！不过这其中也有网页制作工具的一部分功劳，因为功能强大的网页制作工具可以
