功能描述:打开一个网站的网页,过5分钟不动作,就会锁定页面,隐藏内容容器,显示一个容器用于输入密码,输入正确的密码来解锁。锁定后即使用户刷新页面,还是保留原来的状态。如已经锁定的,需要继续锁定,否则显示内容。
示例代码如下,通过document.onmouseover来实现多少分钟没有动作,使用计时器来实现。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<
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
>
|