js实现简单锁屏功能实例


Posted in Javascript onMay 27, 2015

本文实例讲述了js实现简单锁屏功能的方法。分享给大家供大家参考。具体实现方法如下:

//********* 锁屏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.onclick=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');

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
Javascript 设计模式(二) 闭包
May 26 Javascript
分享一个自己写的table表格排序js插件(高效简洁)
Oct 29 Javascript
js正则表达式中test,exec,match方法的区别说明
Jan 29 Javascript
connect中间件session、cookie的使用方法分享
Jun 17 Javascript
jQuery CSS3自定义美化Checkbox实现代码
May 12 Javascript
js中获取时间new Date()的全面介绍
Jun 20 Javascript
js实现简单的网页换肤效果
Jan 18 Javascript
基于Vue实现微信小程序的图文编辑器
Jul 25 Javascript
详解react native页面间传递数据的几种方式
Nov 07 Javascript
在Node.js下运用MQTT协议实现即时通讯及离线推送的方法
Jan 24 Javascript
微信浏览器左上角返回按钮监听的实现
Mar 04 Javascript
JavaScript文档加载模式以及元素获取
Jul 28 Javascript
JS实现简单路由器功能的方法
May 27 #Javascript
JavaScript实现将UPC转换成ISBN的方法
May 26 #Javascript
JavaScript对表格或元素按文本,数字或日期排序的方法
May 26 #Javascript
js实现文本框选中的方法
May 26 #Javascript
javascript委托(Delegate)blur和focus用法实例分析
May 26 #Javascript
javascript删除元素节点removeChild()用法实例
May 26 #Javascript
JavaScript事件委托实例分析
May 26 #Javascript
You might like
解析PHP将对象转换成数组的方法(兼容多维数组类型)
2013/06/21 PHP
一个PHP二维数组排序的函数分享
2014/01/17 PHP
PHP捕获Fatal error错误的方法
2014/06/11 PHP
PHP中strlen()和mb_strlen()的区别浅析
2014/06/19 PHP
简介AngularJS中使用factory和service的方法
2015/06/17 Javascript
jquery实现全选功能效果的实现代码
2016/05/05 Javascript
bootstrap table实例详解
2017/01/06 Javascript
vue.js开发环境安装教程
2017/03/17 Javascript
angular中实现li或者某个元素点击变色的两种方法
2017/07/27 Javascript
Vue ElementUI之Form表单验证遇到的问题
2017/08/21 Javascript
vuejs实现本地数据的筛选分页功能思路详解
2017/11/15 Javascript
详解刷新页面vuex数据不消失和不跳转页面的解决
2018/01/30 Javascript
JS闭包原理与应用经典示例
2018/12/20 Javascript
原生js实现购物车
2020/09/23 Javascript
跟老齐学Python之Python安装
2014/09/12 Python
跟老齐学Python之使用Python查询更新数据库
2014/11/25 Python
Python Web框架Flask下网站开发入门实例
2015/02/08 Python
Python字符串处理函数简明总结
2015/04/13 Python
python写入xml文件的方法
2015/05/08 Python
Python中元组,列表,字典的区别
2017/05/21 Python
Python解析json时提示“string indices must be integers”问题解决方法
2019/07/31 Python
python将邻接矩阵输出成图的实现
2019/11/21 Python
Python实现动态给类和对象添加属性和方法操作示例
2020/02/29 Python
CSS3教程(3):border-color网页边框色彩
2009/04/02 HTML / CSS
印度最大的网上花店:Ferns N Petals(鲜花、礼品和蛋糕)
2017/10/16 全球购物
周仰杰(JIMMY CHOO)法国官方网站:闻名世界的鞋子品牌
2019/09/27 全球购物
介绍一下Transact-SQL中SPACE函数的用法
2015/09/01 面试题
中文系学生自荐信范文
2013/11/13 职场文书
自我评价是什么
2014/01/04 职场文书
前台文员个人求职信范文
2014/01/05 职场文书
企业计划生育责任书
2015/05/09 职场文书
2016年社区中秋节活动总结
2016/04/05 职场文书
python开发实时可视化仪表盘的示例
2021/05/07 Python
详解Laravel制作API接口
2021/05/31 PHP
JavaScript利用html5新方法操作元素类名详解
2021/11/27 Javascript
如何基于python实现单目三维重建详解
2022/06/25 Python