html5 做屏幕保护效果,javascript实现锁定网页、密码解锁效果（类似系统屏幕保护效果）...

功能描述：打开一个网站的网页，过5分钟不动作，就会锁定页面，隐藏内容容器，显示一个容器用于输入密码，输入正确的密码来解锁。锁定后即使用户刷新页面，还是保留原来的状态。如已经锁定的，需要继续锁定，否则显示内容。

示例代码如下，通过document.onmouseover来实现多少分钟没有动作，使用计时器来实现。

javascript实现系统屏幕保护效果(锁定网页)

内容
内容
内容
内容
内容
内容

输入密码：

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();

}

html5 做屏幕保护效果,javascript实现锁定网页、密码解锁效果（类似系统屏幕保护效果）...相关推荐

SystemUI 密码解锁界面点击屏幕不亮屏
不积跬步无以至千里一.前摘熟悉SystemUI模块的童鞋应该知道,SystemUI大部分都是window窗口的各大布局,然后出现不同的场景,而这里做的亮屏操作也是自己做的处理,这里 ...
HTML5期末大作业_影视网站设计——_指环王：护戒使者(13页) TML+CSS+JavaScript 学生DWHTML5网页设计成品_学生DW静态网页设计代做_web课程设计网页制作
HTML5期末大作业:影视网站设计--"指环王:护戒使者(13页) TML+CSS+JavaScript 学生DWHTML5网页设计成品_学生DW静态网页设计代做_web课程设计网页制作常 ...
HTML5期末大作业:影视网站设计——“指环王：护戒使者(13页) TML+CSS+JavaScript 学生DWHTML5网页设计成品_学生DW静态网页设计代做_web课程设计网页制作
HTML5期末大作业:影视网站设计--"指环王:护戒使者(13页) TML+CSS+JavaScript 学生DWHTML5网页设计成品_学生DW静态网页设计代做_web课程设计网页制作常 ...
html5 放大镜效果,JavaScript+HTML5 canvas实现放大镜效果完整示例
本文实例讲述了JavaScript+HTML5 canvas实现放大镜效果.分享给大家供大家参考,具体如下: 效果: www.jb51.net canvas放大镜 #copycanvas { bord ...
【前端实例代码】Html5+css3+JavaScript创建在线播放架子鼓电子鼓演奏网页效果！前端开发网页设计基础入门教程！超简单~
b站视频演示效果: [前端实例代码]Html5+css3+JavaScript创建在线播放架子鼓电子鼓演奏网页效果!前端开发网页设计基础入门教程!超简单~ 效果图: 完整代码: <!DOCTYP ...
win7 锁定计算机失效,win7系统屏幕保护功能失效无法进入屏幕保护状态怎么办...
win7系统自带屏幕保护功能,屏幕保护程序既能节省电量又能保护我们的显示器.如果打开电脑后临时有事,离开电脑后就会自动进入屏幕保护程序,将刚才工作的状态隐藏起来,非常好用.但是有用户反映说win7电脑 ...
HTML5期末大作业：中国传统节日网页设计——端午节(9个页面) HTML+CSS+JavaScript 节日网页HTML代码学生网页课程设计期末作业下载
HTML5期末大作业:中国传统节日网站设计--端午节(9个页面) HTML+CSS+JavaScript 节日网页HTML代码学生网页课程设计期末作业下载临近期末, 你还在为HTML网页设计结课作 ...
用html5做一个介绍自己家乡的页面_厚溥资讯 | HTML5的小知识点小集合（上）
1.Doctype作用?标准模式与兼容模式各有什么区别? (1)声明位于位于HTML文档中的第一行,处于标签之前.告知浏览器的解析器用什么文档标准解析这个文档.DOCTYPE不存在或格式不正确会导致文 ...
HTML5期末大作业：个人空间相册网页设计 (6页) HTML+CSS+JavaScript
HTML5期末大作业:个人空间相册网页设计 (6页) HTML+CSS+JavaScript 期末作业HTML代码学生网页课程设计期末作业下载 web网页设计制作成品临近期末, 你还在为HTM ...

html5 做屏幕保护效果,javascript实现锁定网页、密码解锁效果（类似系统屏幕保护效果）...

html5 做屏幕保护效果,javascript实现锁定网页、密码解锁效果（类似系统屏幕保护效果）...相关推荐

最新文章

热门文章