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是我隨便寫的，有需要的同學可以根據自己的需求去訂制。

?