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 相关文章推荐
jQuery EasyUI API 中文文档 - PropertyGrid属性表格
Nov 18 Javascript
javascript常用代码段搜集
Dec 04 Javascript
js打造数组转json函数
Jan 14 Javascript
有效提高JavaScript执行效率的几点知识
Jan 31 Javascript
在JavaScript中使用NaN值的方法
Jun 05 Javascript
Bootstrap选项卡与Masonry插件的完美结合
Jul 06 Javascript
input file上传 图片预览功能实例代码
Oct 25 Javascript
微信小程序调用天气接口并且渲染在页面过程详解
Jun 24 Javascript
JS 遍历 json 和 JQuery 遍历json操作完整示例
Nov 11 jQuery
vue设置默认首页的操作
Aug 12 Javascript
vue使用canvas实现移动端手写签名
Sep 22 Javascript
Javascript异步流程控制之串行执行详解
Sep 27 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支持断点续传的源码
2010/05/16 PHP
php 批量替换html标签的实例代码
2013/11/26 PHP
个人总结的一些关于String、Function、Array的属性和用法
2007/01/10 Javascript
JavaScript isPrototypeOf和hasOwnProperty使用区别
2010/03/04 Javascript
使用JavaScript+canvas实现图片裁剪
2015/01/30 Javascript
jQuery实现提示密码强度的代码
2015/07/15 Javascript
ExtJs动态生成treepanel的Json格式
2015/07/19 Javascript
详解javascript中原始数据类型Null和Undefined
2015/12/17 Javascript
Javascript中this绑定的3种方法与比较
2016/10/13 Javascript
详解angularJs中自定义directive的数据交互
2017/01/13 Javascript
jQuery层级选择器实例代码
2017/02/06 Javascript
vue中英文切换实例代码
2020/01/21 Javascript
Python中用于返回绝对值的abs()方法
2015/05/14 Python
Python中进程和线程的区别详解
2017/10/29 Python
python面向对象法实现图书管理系统
2019/04/19 Python
详解Django admin高级用法
2019/11/06 Python
python读取mysql数据绘制条形图
2020/03/25 Python
详解Ubuntu环境下部署Django+uwsgi+nginx总结
2020/04/02 Python
python学生管理系统的实现
2020/04/05 Python
互斥锁解决 Python 中多线程共享全局变量的问题(推荐)
2020/09/28 Python
Django 用户认证Auth组件的使用
2020/11/30 Python
CSS3贝塞尔曲线示例:创建链接悬停动画效果
2020/11/19 HTML / CSS
韩都衣舍天猫官方旗舰店:天猫女装销售总冠军
2017/10/10 全球购物
Vans荷兰官方网站:美国南加州的原创极限运动潮牌
2018/01/23 全球购物
纽约海:Sea New York
2018/11/04 全球购物
九年级体育教学反思
2014/01/23 职场文书
英文自荐信常用句子
2014/03/26 职场文书
遗产继承公证书
2014/04/09 职场文书
《微笑着面对生活》优秀演讲稿范文
2014/09/23 职场文书
高中生综合素质自我评价
2015/03/06 职场文书
小学生五一劳动节演讲稿
2015/03/18 职场文书
2015社区健康教育工作总结
2015/05/20 职场文书
主持稿开场白
2015/06/01 职场文书
教你如何用Python实现人脸识别(含源代码)
2021/06/23 Python
SQL之各种join小结详细讲解
2021/08/04 MySQL
win10频率超出范围怎么办?win10老显示超出工作频率范围的解决方法
2022/07/07 数码科技