js实现一个简单的锁屏功能

news/2024/11/8 15:29:27/
//*********  锁屏DIV ***************************
function LockScreen(tag,title,width,height,url)
{
    if (tag) //锁屏
    {
        var lockdiv = document.getElementById("lockscreen");
        if (lockdiv!=null)
        {
            lockdiv.style.display = "block";
            var subdiv = document.getElementById("subdialog");
            if (subdiv!=null)
            {
                subdiv.style.display = "block";
                document.getElementById("dialog1").src = url;
            }          
        }else{
            //创建新的锁屏DIV,并执行锁屏
            var tabframe= document.createElement("div");
            tabframe.id = "lockscreen";
            tabframe.name = "lockscreen";
            tabframe.style.top = '0px';
            tabframe.style.left = '0px';
            tabframe.style.height = '100%';
            tabframe.style.width = '100%';
            tabframe.style.position = "absolute";
            tabframe.style.filter = "Alpha(opacity=10)";
            tabframe.style.backgroundColor="#000000";
            tabframe.style.zIndex = "99998";
            document.body.appendChild(tabframe);
            tabframe.style.display = "block";
            //子DIV
            var subdiv = document.createElement("div");
            subdiv.id = "subdialog";
            subdiv.name = "subdialog";
            subdiv.style.top = Math.round((tabframe.clientHeight-height)/2);
            subdiv.style.left = Math.round((tabframe.clientWidth-width)/2);
            subdiv.style.height = height+'px';
            subdiv.style.width = width+'px';
            subdiv.style.position = "absolute";
            subdiv.style.backgroundColor="#000000"; 
            subdiv.style.zIndex = "99999";
            subdiv.style.filter = "Alpha(opacity=100)";
            subdiv.style.border = "1px";
            //subdiv.onmousemove = mouseMoveDialog;
            //subdiv.onmousedown = control_onmousedown;
            //subdiv.onmouseup = mouseUp;
            document.body.appendChild(subdiv);
            subdiv.style.display = "block";
            //subdiv.οnclick=UNLockScreen;
            var iframe_height = height-30;
            var titlewidth = width;
            var html = "<table border='0' cellpadding='0' cellspacing='0'>"
            html += "<tr><td></td><td>";
            html += "<table><tr><td><font color='#FFFFFF'><b>"+title+"</b></font></td><td style='width:30px' valign='top'><img src='/images/images/close.gif' ></img></td></tr></table>";
            html += "</td><td></td></tr>";
            html += "<tr><td></td><td style='height:100px;'><iframe id='dialog1' frameborder=0 style='width:"+titlewidth+"px;height:" + iframe_height + "px' src='"+url+"'></iframe></td><td></td></tr>";
            html += "<td></td><td></td><td></td>";
            html += "</table>";
            subdiv.innerHTML = html;
        }
    }else{
        //解屏
        var lockdiv = document.getElementById("lockscreen");
        if (lockdiv!=null)
        {
            lockdiv.style.display = "none";
        }
        var subdiv = document.getElementById("subdialog");
        if (subdiv!=null)
        {
            subdiv.style.display = "none";
        }
    }
}

 

function UNLockScreen(){
   LockScreen(false);
}

        如果大家不知道什么是锁屏,可以去163信箱看一看,用途是你要离开屏幕一段时间时可以暂时锁住屏幕保留工作空间。带回来只要重新输入密码验证即可恢复到原先的工作空间。
        一般都是通过在页面上增加不透明遮罩层实现锁屏功能,或者是使用两个区域互相显示隐藏。使用框架(frame)构建的网站如果要实现锁屏功能则很有难度。因为在框架页面无法使用div做层。而且框架也不支持css的display:none;属性。 

        最后的实现方法是使用在FRAMESET内再增加一个frame,出事状态时FRAMESET的rows属性将新增加的frame设置为高度为0。点击锁屏按钮时,则将FRAMESET中其他的frame的高度设置为0,将新增的frame高度设置为*。这样我们就完成了frame的替换功能。解锁后将 FRAMESET的rows属性重新设置为初始值,屏幕恢复到原状态。
        这样并没有结束。如果用户在屏幕上使用右键刷新,或者按F5键刷新页面,就会绕过锁屏的密码校验功能。可以通过阻止F5和鼠标右键的默认实现达到目的。

 

 

//阻止F5或者鼠标右键刷新,使锁屏失效。
document.onkeydown = function(){
          if(event.keyCode==116) {
          event.keyCode=0;
          event.returnValue = false;
          }
     }
   
document.oncontextmenu = function() {event.returnValue = false;}

 

最后调用的方法:LockScreen(true,'标题',424,314,'http://www.baidu.com');


http://www.ppmy.cn/news/484346.html

相关文章

Android WallpaperManager 同时设置桌面壁纸与锁屏的问题

最近项目中&#xff0c;需要给手机设置桌面壁纸与锁屏。 大家都知道使用 WallpaperManager.setStream()方法就好 RequiresPermission(android.Manifest.permission.SET_WALLPAPER) public int setStream(InputStream bitmapData, Rect visibleCropHint,boolean allowBackup, …

使用CiLocks绕过Android的锁屏功能

关于CiLocks CiLocks是一款功能强大的Android渗透测试工具&#xff0c;在该工具的帮助下&#xff0c;研究人员可以轻松绕过Android设备的锁屏保护。 功能介绍 爆破四位PIN码&#xff1b; 爆破六位PIN码&#xff1b; 使用字典爆破锁屏密码&#xff1b; 绕过锁屏保护&#xff0…

Android:获取当前的锁屏壁纸或桌面壁纸

使用WallpaperManager类 FLAG_LOCK为锁屏壁纸 FLAG_SYSTEM为桌面壁纸 //使用WallpaperManager类TargetApi(Build.VERSION_CODES.N)private Bitmap getLockWallpaper(){WallpaperManager wallpaperManager WallpaperManager.getInstance(mContext);//获取WallpaperManager实例…

银河麒麟liunux下的屏幕保护与锁屏设置

windows中有屏幕保护程序&#xff0c;在人离开的一段时间后可以开启屏幕保护&#xff0c;而且还可以设置密码&#xff0c;非常有利于短时间离开电脑时的保护隐私。 在linux中其实也有类似的功能&#xff0c;只不过一开始以为要安装termsaver什么的&#xff0c;还要用xset命令等…

linux系统之屏保与锁屏命令

linux系统之屏保与锁屏命令。 一、屏保命令。 #显示屏保但不锁定&#xff0c;移动鼠标或敲击键盘后自动消失 gnome-screensaver-command -a#显示并锁定&#xff0c;移动鼠标或敲击键盘弹出密码框 gnome-screensaver-command -l二、锁屏命令。 #列出当前所有的会话。这是默认…

直接选择排序及其稳定性分析

直接选择排序 直接选择排序是一种很直观的排序方法。其操作是这样&#xff1a;先在未排序的序列中选择最小的元素&#xff08;或最大的元素&#xff09;&#xff0c;把它与第一个元素交换&#xff0c;放在第一个位置&#xff0c;再在剩余未排序序列中选择第二小的&#xff0c;…

86墙插双联明装新款:蓝奥声智能用电设备安全防护有多强

物理绝缘和智能数据分析安全技术重塑了墙壁插座的安全标准&#xff0c;极大可能规避日常生活中的意外&#xff0c;只有做到意外情况下也不会触电&#xff0c;这样的墙壁插座才能真正叫安全墙壁插座&#xff0c;“不触电且足够安全”应该成为墙壁插座的安全标配标准。 智能物理…

MySQL 中的 CASE语句底层实现

1. 概述 CASE 表达式是 SQL 中用于条件判断的一种常用语法。它可以根据满足不同条件时需要返回的值来进行操作。在 MySQL 中&#xff0c;CASE 表达式有两种形式&#xff1a;简单 CASE 和搜索 CASE。简单 CASE 对比指定值和表达式的值进行操作&#xff0c;而搜索 CASE 则对多个…