web页面锁屏初级尝试

因为工作需要，所以在网上找了一些素材来弄这个功能。在我找到的素材中，大多都是不完善的。虽然我的也不是很完善，但是怎么说呢。要求不是很高的话。可以直接拿来用的【需要引用jQuery】。废话不多说直接上代码

这部分是js代码

  1 <script>
  2         (function(){
  3     // 获取对象
  4     var $ = function (id){
  5         return document.getElementById(id);
  6     };
  7     // 遍历
  8     var each = function(a, b) {
  9         for (var i = 0, len = a.length; i < len; i++) b(a[i], i);
 10     };
 11     // 事件绑定
 12     var bind = function (obj, type, fn) {
 13         if (obj.attachEvent) {
 14             obj['e' + type + fn] = fn;
 15             obj[type + fn] = function(){obj['e' + type + fn](window.event);}
 16             obj.attachEvent('on' + type, obj[type + fn]);
 17         } else {
 18             obj.addEventListener(type, fn, false);
 19         };
 20     };
 21
 22     // 移除事件
 23     var unbind = function (obj, type, fn) {
 24         if (obj.detachEvent) {
 25             try {
 26                 obj.detachEvent('on' + type, obj[type + fn]);
 27                 obj[type + fn] = null;
 28             } catch(_) {};
 29         } else {
 30             obj.removeEventListener(type, fn, false);
 31         };
 32     };
 33
 34     // 阻止浏览器默认行为
 35     var stopDefault = function(e){
 36         e.preventDefault ? e.preventDefault() : e.returnValue = false;
 37     };
 38     // 获取页面滚动条位置
 39     var getPage = function(){
 40         var dd = document.documentElement,
 41         db = document.body;
 42         return {
 43             left: Math.max(dd.scrollLeft, db.scrollLeft),
 44             top: Math.max(dd.scrollTop, db.scrollTop)
 45         };
 46     };
 47
 48     // 锁屏
 49     var lock = {
 50         show: function(){
 51             $('pageOverlay').style.visibility = 'visible';
 52             var p = getPage(),
 53             left = p.left,
 54             top = p.top;
 55
 56             // 页面鼠标操作限制
 57             this.mouse = function(evt){
 58                 var e = evt || window.event;
 59                 stopDefault(e);
 60                 scroll(left, top);
 61             };
 62             each(['DOMMouseScroll', 'mousewheel', 'scroll', 'contextmenu'], function(o, i) {
 63                 bind(document, o, lock.mouse);
 64             });
 65             // 屏蔽特定按键: F5, Ctrl + R, Ctrl + A, Tab, Up, Down
 66             this.key = function(evt){
 67                 var e = evt || window.event,
 68                 key = e.keyCode;
 69                 if((key == 116) || (e.ctrlKey && key == 82) || (e.ctrlKey && key == 65) || (key == 9) || (key == 38) || (key == 40)) {
 70                     try{
 71                         e.keyCode = 0;
 72                     }catch(_){};
 73                     stopDefault(e);
 74                 };
 75             };
 76             bind(document, 'keydown', lock.key);
 77         },
 78         close: function(){
 79             $('pageOverlay').style.visibility = 'hidden';
 80             each(['DOMMouseScroll', 'mousewheel', 'scroll', 'contextmenu'], function(o, i) {
 81                 unbind(document, o, lock.mouse);
 82             });
 83             unbind(document, 'keydown', lock.key);
 84         }
 85     };
 86     bind(window, 'load', function(){
 87         $('btn_lock').onclick = function(){
 88             if($('pageOverlay').style.visibility=="visible"){
 89                 lock.close();
 90             }
 91             else{
 92                 lock.show();
 93             }
 94         };
 95     });
 96 })();
 97 $(document).ready(function(e){
 98     /*点击删除 清空输入框的内容*/
 99     $('#btn_lock').click(function(){
100         var target = document.getElementById("text");
101         $('#btn_lock').attr("disabled",true);
102         var zhi = target.value;
103
104         sessionStorage.setItem("d",zhi)
105
106     })
107
108     $('#btn_lock').on("click",function(){
109         $('#text').val('');
110     });
111 });
112
113 function loadStorage(){
114
115     var target = document.getElementById("shuchu");
116     var str=document.getElementById("text");
117     start=str.value;
118
119     var  b = sessionStorage.getItem("d")
120     if(start==""){
121         target.innerHTML="密码不能为空！";
122     }else{
123         if(b==start){
124          target.innerHTML= "恭喜你，获得了爱神的青睐！";
125          window.close();
126      }
127      else{
128         target.innerHTML="很抱歉，你被爱神残忍抛弃！";
129     }
130  }
131 }
132
133 </script>

下面这部分是html的代码

<div class="flex-con"><div><div><p id="shuchu"></p><input type="password" id="text" placeholder="请输入锁屏密码" /></div><input id="btn_lock" value="确定" type="button"><input type="button" value="解锁"  onclick="loadStorage('shuchu')"></div></div><div id="pageOverlay"></div>

还要加一部分css 不然按钮和输入框也会被遮住

 1 <style type="text/css">
 2     body {
 3         position: absolute;
 4         left: 0;
 5         right: 0;
 6         top: 0;
 7         bottom: 0;
 8     }
 9     .flex-con {
10         position: absolute;
11         left: 0;
12         right: 0;
13         top: 0;
14         bottom: 0;
15         display: flex;
16         flex-direction: column;
17         align-items: center;
18         justify-content: center;
19         z-index: 9999;
20     }
21 </style>

1     <style type="text/css">
2         *{ padding:0; margin:0;}
3         #pageOverlay { visibility:hidden; position:fixed; top:0; left:0; z-index:1987; width:100%; height:100%; background:#000; filter:alpha(opacity=70); opacity:0.7; }
4         /*IE6 fixed*/
5         * html { background:url(*) fixed; }
6         * html body { margin:0; height:100%; }
7         * html #pageOverlay { position: absolute; left: expression(documentElement.scrollLeft + documentElement.clientWidth - this.offsetWidth); top: expression(documentElement.scrollTop + documentElement.clientHeight - this.offsetHeight); }
8     </style>

css是我随便写的，有需要的同学可以根据自己的需求去订制。

转载于:https://www.cnblogs.com/shichina/p/10481172.html

web页面锁屏初级尝试相关推荐

Vue实现web网页锁屏功能
vue实现WEB网页锁屏功能 ![在这里插入图片描述](https://img-blog.csdnimg.cn/725295ef7d034188b606350795a54639.png?x-oss-p ...
2020-06-28 html的实现页面锁屏 + css的BFC与float + js的立即执行函数写法 + 颜色搭配
2020-06-28 题目来源:http://www.h-camel.com/index.html [html] 实现一个页面锁屏的功能锁屏的最终效果就是退出登录,思路是点击锁屏按钮等操作时使t ...
[html] 实现一个页面锁屏的功能
[html] 实现一个页面锁屏的功能 <!DOCTYPE html> <html> <head> <title>Ctrl+l监控锁屏</title ...
vue实现页面锁屏完美解决
vue实现页面锁屏完美解决最新写项目客户要求写一个锁屏功能.静下心来,慢慢看 ,相信你会有收获的. 功能点 1.禁止浏览器返回按钮. 2.手动输入路由会强制跳到锁屏页面. 3.必须输入正确密码或者 ...
如何实现Web页面录屏？
摘要: 很有意思的操作- 原文:web页面录屏实现译者:frontdog Fundebug经授权转载,版权归原作者所有. 写在前面的话在看到评论后,突然意识到自己没有提前说明,本文可以说是一篇调研 ...
vue实现页面锁屏完美解决（续集）
vue实现页面锁屏完美解决 (续集) vue实现页面锁屏完美解决这篇文章的续集. 上面那篇文章还不够完美在后面还是出现了一些bug.所以为了大家能少走点弯路我把我遇到的坑以及解决的办法和最新的写 ...
html页面锁屏,锁屏页面.html
锁屏页面 $axure.utils.getTransparentGifPath = function() { return 'resources/images/transparent.gif'; ...
易安卓打开Android系统中的解锁方式选择页面(锁屏方式选择)
感谢名单感谢fylfyl2写的https://blog.csdn.net/fyilun/article/details/21257595 E4A打开锁屏方式页面 Intent intent = ne ...
java web实现锁屏操作_javaWeb锁屏的简单实现
简单介绍:需求上有个小功能,用户登录后点击用户名,可以点击锁屏,锁屏解除,需要输入正确的密码才能进入管理后台页面enheng(*/ω＼*)(*/ω＼*)(*/ω＼*) 思路简介:其实刚看到要做锁屏,第 ...

web页面锁屏初级尝试

web页面锁屏初级尝试相关推荐

最新文章

热门文章