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是我随便写的，有需要的同学可以根据自己的需求去订制。

posted on 2019-03-06 09:05 风华异世阅读(830) 评论(0) 编辑收藏举报

刷新页面返回顶部