web页面锁屏初级尝试

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

这部分是js代码

 <script>
         (function(){
     // 获取对象
     var $ = function (id){
         return document.getElementById(id);
     };
     // 遍历
     var each = function(a, b) {
         for (var i = 0, len = a.length; i < len; i++) b(a[i], i);
     };
     // 事件绑定
     var bind = function (obj, type, fn) {
         if (obj.attachEvent) {
             obj['e' + type + fn] = fn;
             obj[type + fn] = function(){obj['e' + type + fn](window.event);}
             obj.attachEvent('on' + type, obj[type + fn]);
         } else {
             obj.addEventListener(type, fn, false);
         };
     };

     // 移除事件
     var unbind = function (obj, type, fn) {
         if (obj.detachEvent) {
             try {
                 obj.detachEvent('on' + type, obj[type + fn]);
                 obj[type + fn] = null;
             } catch(_) {};
         } else {
             obj.removeEventListener(type, fn, false);
         };
     };

     // 阻止浏览器默认行为
     var stopDefault = function(e){
         e.preventDefault ? e.preventDefault() : e.returnValue = false;
     };
     // 获取页面滚动条位置
     var getPage = function(){
         var dd = document.documentElement,
         db = document.body;
         return {
             left: Math.max(dd.scrollLeft, db.scrollLeft),
             top: Math.max(dd.scrollTop, db.scrollTop)
         };
     };

     // 锁屏
     var lock = {
         show: function(){
             $('pageOverlay').style.visibility = 'visible';
             var p = getPage(),
             left = p.left,
             top = p.top;

             // 页面鼠标操作限制
             this.mouse = function(evt){
                 var e = evt || window.event;
                 stopDefault(e);
                 scroll(left, top);
             };
             each(['DOMMouseScroll', 'mousewheel', 'scroll', 'contextmenu'], function(o, i) {
                 bind(document, o, lock.mouse);
             });
             // 屏蔽特定按键: F5, Ctrl + R, Ctrl + A, Tab, Up, Down
             this.key = function(evt){
                 var e = evt || window.event,
                 key = e.keyCode;
                 if((key == 116) || (e.ctrlKey && key == 82) || (e.ctrlKey && key == 65) || (key == 9) || (key == 38) || (key == 40)) {
                     try{
                         e.keyCode = 0;
                     }catch(_){};
                     stopDefault(e);
                 };
             };
             bind(document, 'keydown', lock.key);
         },
         close: function(){
             $('pageOverlay').style.visibility = 'hidden';
             each(['DOMMouseScroll', 'mousewheel', 'scroll', 'contextmenu'], function(o, i) {
                 unbind(document, o, lock.mouse);
             });
             unbind(document, 'keydown', lock.key);
         }
     };
     bind(window, 'load', function(){
         $('btn_lock').onclick = function(){
             if($('pageOverlay').style.visibility=="visible"){
                 lock.close();
             }
             else{
                 lock.show();
             }
         };
     });
 })();
 $(document).ready(function(e){
     /*点击删除 清空输入框的内容*/
     $('#btn_lock').click(function(){
         var target = document.getElementById("text");
         $('#btn_lock').attr("disabled",true);
         var zhi = target.value;

         sessionStorage.setItem("d",zhi)

     })

     $('#btn_lock').on("click",function(){
         $('#text').val('');
     });
 });    

 function loadStorage(){

     var target = document.getElementById("shuchu");
     var str=document.getElementById("text");
     start=str.value;

     var  b = sessionStorage.getItem("d")
     if(start==""){
         target.innerHTML="密码不能为空！";
     }else{
         if(b==start){
          target.innerHTML= "恭喜你，获得了爱神的青睐！";
          window.close();
      }
      else{
         target.innerHTML="很抱歉，你被爱神残忍抛弃！";
     }
  }
 }

 </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 不然按钮和输入框也会被遮住

 <style type="text/css">
     body {
         position: absolute;
         left:;
         right:;
         top:;
         bottom:;
     }
     .flex-con {
         position: absolute;
         left:;
         right:;
         top:;
         bottom:;
         display: flex;
         flex-direction: column;
         align-items: center;
         justify-content: center;
         z-index:;
     }
 </style>

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

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