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: 0;
        right: 0;
        top: 0;
        bottom: 0;
    }
    .flex-con {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        z-index: 9999;
    }
</style>

    <style type="text/css">
        *{ padding:0; margin:0;}
        #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; }
        /*IE6 fixed*/
        * html { background:url(*) fixed; }
        * html body { margin:0; height:100%; }
        * html #pageOverlay { position: absolute; left: expression(documentElement.scrollLeft + documentElement.clientWidth - this.offsetWidth); top: expression(documentElement.scrollTop + documentElement.clientHeight - this.offsetHeight); }
    </style>

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