因为工作需要, 所以在网上找了一些素材来弄这个功能. 在我找到的素材中, 大多都是不完善的. 虽然我的也不是很完善, 但是怎么说呢. 要求不是很高的话. 可以直接拿来用的 [需要引用 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](Windows.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 || Windows.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 || Windows.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(Windows, '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= "恭喜你, 获得了爱神的青睐!";
- Windows.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 是我随便写的, 有需要的同学可以根据自己的需求去订制.
来源: http://www.bubuko.com/infodetail-2977550.html