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

最新推荐文章于 2023-11-21 16:29:34 发布
最新推荐文章于 2023-11-21 16:29:34 发布
阅读量4.3k 收藏 3
点赞数

功能描述：打开一个网站的网页，过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">
< 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
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
js+html5实现手机九宫格密码解锁功能
10-18
主要为大家详细介绍了js+html5实现手机九宫格密码解锁功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
HTML5响应式后台登录界面模板
01-17
HTML5响应式后台登录界面模板基于HTML5+Bootstrap3+jQuery制作，响应式布局设计，自适应屏幕分辨率大小，多个网页背景图片自动轮播，清新简约，效果非常不错！有邮箱、密码、验证码、记住登录账号、重置等表单项目，带表单验证功能。
JS实现密码框的显示密码和隐藏密码功能示例
10-20
主要介绍了JS实现密码框的显示密码和隐藏密码功能,涉及javascript针对页面form表单元素动态操作的相关技巧,需要的朋友可以参考下
网址锁定系统-基于python和flask
srrsxd的博客
12-27 131
网址锁定系统-基于python和flask
html手势密码解锁插件(附源码)
最新发布
xcLeigh
11-21 1578
html手势密码解锁插件(附源码)，仿手机手势密码，拖动九宫格密码，手势密码即3×3的点阵组成的图形密码，密码长度为九位数，代码上手简单，代码独立，可以直接使用。也可直接预览效果。
html 锁定页面(js遮罩层弹出div效果)
10-29
html 锁定页面(js遮罩层弹出div效果)，需要的朋友可以参考下。
js锁定web页面到浏览器
u014706808的专栏
04-15 1937
原来不能说是锁定，只是弹出的
js 加锁
qq_25219151的博客
03-10 2080
js 加锁 防止重复提交 $(document).ready(function(){ var lock =false;//锁作为全局变量 $("#submit").on('click',function(){ //如果用户提交了一次，lock被置为true，锁开启。后续在锁被关闭之前，用户都不能提交数据。 if(lock) { //锁已经开启，在提交只会被阻断 return false;
JavaScript实现锁
RisenMyth的博客
11-27 6317
JavaScript实现锁 问题描述： 最近，在uniapp上实现一个页面功能，需要在onReady之后获取canvasContext进行绘制，但是里面用到的一些参数，需要在onLoad上进行传参拿到，由于不同的手机，渲染速度不同，因此导致 onReady 与 onLoad 的执行先后顺序不确定，从而影响到后面的功能操作。 解决方案： 在后端，我们会想到直接使用锁来解决这个问题。但在JavaScript里面，是没有多线程的，因此也就不存在锁。在这里，我使用Promise实现锁。 Lock.js exp
浏览器锁频功能javascript代码
tbs005a的专栏
11-29 116
//浏览器锁频功能javascript代码，网上搜集，测试时效果没出来，不知道怎么回事，如果正常了，再贴完整的解决代码 function showScreen(id) { //var Element = document.getElementById(id); var Elements = document.getElementById("Screen"); alert(getWidth(...
JS实现加载时锁定HTML页面元素的方法
12-12
本文实例讲述了JS实现加载时锁定HTML页面元素的方法。分享给大家供大家参考，具体如下： 在html加载时js锁定页面内所有input，textarea，select  具体js如下 index.js for(z=0;z<document.getElementsByTagName('input').length;z++) { document.getElementsByTagName('input')[z].setAttribute('disabled','disabled') } for(zz=0;zz<document.getElementsByTagName('textarea').
screen-lock.js:屏幕锁定功能的简单实现，但相当安全
04-07
screen-lock.js 屏幕锁定功能的简单实现，但是非常安全，因为所有DOM节点都已通过$.fn.detach提取到内存中，这意味着除非访问内存，否则无法轻松还原它。 它很容易导入使用： const lock = require ( 'screen-lock' ) ; const unlock = lock ( ) ; // append a locking mask in the body // ... // hide mask and unlock after prompt unlock ( ) ; 在这里您还可以查看。 :fuel_pump: 如何贡献 有一个主意吗？ 发现了错误？ 看看。 :scroll: 执照 :copyright:aleen42
js 特效 html 特效 输入密码后才能进入页面
08-25
js 特效 html 特效 输入密码后才能进入页面 js 特效 html 特效 输入密码后才能进入页面
仿Lightbox效果（Windows关机效果），div覆盖，锁定页面及IE 6实现position:fixed;
03-18
NULL 博文链接：https://clfsw.iteye.com/blog/657170
javascript 实现的类似hao123的多邮箱登录效果
10-30
javascript 实现的类似hao123的多邮箱登录效果
javascript实现的网页局布刷新效果
10-30
AJAX,近几年火热起来的一个词.什么是ajax本文就不介绍了，其实,AJAX也就是 javascript脚本的应用.全拼是:AsynchronousJavaScript+XML .现在我们就来看一个用javascript实现的局部刷新
javascript实现网页背景烟花效果的方法
10-23
主要介绍了javascript实现网页背景烟花效果的方法,涉及javascript数学运算及页面元素动态操作的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
javascript实现网页动态滚动效果
05-12
网页动态滚动效果可以通过 JavaScript 的 scrollTo() 方法实现。该方法可以将窗口滚动到指定位置。 例如，以下代码将窗口滚动到文档的底部： ```javascript window.scrollTo(0, document.body.scrollHeight); ``` ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值