js实现自动锁屏功能


Posted in Javascript onJune 02, 2021

1.使用场景

有这么一个需求,开发了一套系统,当用户离开桌面或者一段时间不操作的话,需要把该系统所有打开页面锁定起来,就跟桌面锁屏一样,只能输入密码验证成功后,或者重新登录,才可以继续操作页面,如果刷新页面,也要保持锁定。就像下图一样。当然用户也可以手动触发锁屏。目的是防止他人随意操作系统的重要内容。那么该如何去实现呢?

5s锁屏效果如下:

js实现自动锁屏功能

2.思路

  1. 首先需要一个变量isLock表示页面是否锁定。由于多个页面需要共享这个数据,且刷新后依然能够获取到,所以我使用了localStorage储存在本地。isLock为true的时候就展示锁屏样式。
  2. 设置一个定时器 setTimeout,比如代码中设置页面无操作n秒后锁屏,那么n秒后执行锁屏操作lockPro(),即var timer = setTimeout(lockPro, n)
  3. 需要监测window的mousemove事件,监测用户鼠标移动动作,判断屏幕有没有被锁定,如果已经锁定,则不做任何操作,如果屏幕还没有锁定,需要设置一个变量moveTime记录每次鼠标移动时的时间,并保存到localStorage中,并且清除定时器timer,重新计时。
  4. setInterval轮询监听isLock,每1s获取一次,以便及时拿到锁屏状态。
  5. 锁屏操作lockPro,判断当前时间与上次鼠标操作的时间即moveTime的差值,如果小于n秒,则认为不需要锁屏,如果大于等于n秒,则需要锁屏,并更新锁屏状态isLock
  6. 判断状态为锁定后,清除定时器timer,结束定时任务。
  7. 判断状态为未锁定后,重置定时器,即先清除timer,再设置一个timer
  8. 退出登录时,清除本地缓存isLock。
  9. 密码解锁时,清除本地缓存isLock,重新设置moveTime,重置定时器。

有点绕,需要好好捋一捋。

3.代码实现

以下代码是不完全代码,html结构省略了,大家自由发挥。

// app.vue

data () {
  return {
    timeOut: 5000,
    timer: null,
    isLock: 'false'
  }
},
mounted () {
  this.timer = setTimeout(this.lockPro, this.timeOut)
  // 首次设置操作时间
  localStorage.setItem('moveTime', Date.now())
  // 首次判断状态
  this.modalStatus()
  // 轮询监听状态
  setInterval(this.modalStatus, 1000)
  // 监听鼠标事件
  this.events()
},
methods:{
   events() {
      window.onmousemove = () => {
        // console.log('鼠标移动了')
        if (!this.isLock) {
          localStorage.setItem('moveTime', Date.now())
          this.clearLocaPro('continue')
        }
      }
    },
    modalStatus() {
      if (localStorage.getItem('isLock') === 'true') {
        // console.log('锁屏了')
        this.isLock = true
        this.clearLocaPro()
      } else {
        // console.log('当前没锁屏')
        this.isLock = false
        this.clearLocaPro('continue')
      }
    },
    lockPro() {
      if (!this.timeOut) {
        localStorage.setItem('isLock', 'false')
        this.clearLocaPro('continue')
        return
      }
      if (Date.now() - localStorage.getItem('moveTime') < this.timeOut) {
        localStorage.setItem('isLock', 'false')
        this.clearLocaPro('continue')
      } else {
        localStorage.setItem('isLock', 'true')
        this.clearLocaPro()
      }
    },
    clearLocaPro(status) {
      if(this.timer){
         clearTimeout(this.timer)
      }
      if (status === 'continue') {
        this.timer = setTimeout(this.lockPro, this.timeOut)
      }
    },
    // 手动锁定
    handleLock(){
      this.clearLocaPro()
      localStorage.setItem('isLock', 'true')
    },
    // 密码解锁
    unlock(){
      localStorage.removeItem('isLock')
      localStorage.setItem('moveTime', Date.now())
      this.clearLocaPro('continue')
    },
    ...
    // 别忘了退出登录也要清除isLock
}

到此这篇关于js实现自动锁屏功能的文章就介绍到这了,更多相关js 自动锁屏 内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
js实现图片拖动改变顺序附图
May 13 Javascript
动态加载jQuery的方法
Jun 16 Javascript
JS实用技巧小结(屏蔽错误、div滚动条设置、背景图片位置等)
Jun 16 Javascript
基于JS+Canves实现点击按钮水波纹效果
Sep 15 Javascript
jquery实现刷新随机变化样式特效(tag标签样式)
Feb 03 Javascript
tangram.js库实现js类的方式实例分析
Jan 06 Javascript
微信小程序学习笔记之跳转页面、传递参数获得数据操作图文详解
Mar 28 Javascript
微信小程序的mpvue框架快速上手指南
May 15 Javascript
微信小程序批量监听输入框对按钮样式进行控制的实现代码
Oct 12 Javascript
基于Vue中的父子传值问题解决
Jul 27 Javascript
JS实现简易日历效果
Jan 25 Javascript
Web应用开发TypeScript使用详解
May 25 Javascript
如何将JavaScript将数组转为树形结构
Jun 02 #Javascript
关于antd tree 和父子组件之间的传值问题(react 总结)
使用react+redux实现计数器功能及遇到问题
微信小程序基础教程之echart的使用
vue实现水波涟漪效果的点击反馈指令
vue 实现上传组件
May 31 #Vue.js
vue基于Teleport实现Modal组件
You might like
php将csv文件导入到mysql数据库的方法
2014/12/24 PHP
Linux操作系统安装LAMP环境
2015/06/26 PHP
php面向对象与面向过程两种方法给图片添加文字水印
2015/08/26 PHP
php rmdir使用递归函数删除非空目录实例详解
2016/10/20 PHP
php微信扫码支付 php公众号支付
2019/03/24 PHP
php 使用expat方式解析xml文件操作示例
2019/11/26 PHP
JavaScript中令你抓狂的魔术变量
2006/11/30 Javascript
Javascript 闭包引起的IE内存泄露分析
2012/05/23 Javascript
鼠标经过显示二级菜单js特效
2013/08/13 Javascript
js禁止页面使用右键(简单示例代码)
2013/11/13 Javascript
jquery获取url参数及url加参数的方法
2015/10/26 Javascript
JS实现获取键盘按下的按键并显示在页面上的方法
2015/11/04 Javascript
使用JQuery FancyBox插件实现图片展示特效
2015/11/16 Javascript
javascript类型系统 Window对象学习笔记
2016/01/07 Javascript
bootstrap-wysiwyg结合ajax实现图片上传实时刷新功能
2016/05/27 Javascript
带有定位当前位置的百度地图前端web api实例代码
2016/06/21 Javascript
微信JS-SDK坐标位置如何转换为百度地图坐标
2016/07/04 Javascript
jquery插件treegrid树状表格的使用方法详解(.Net平台)
2017/01/03 Javascript
浅谈jQuery的bind和unbind事件(绑定和解绑事件)
2017/03/02 Javascript
基于jQuery的$.getScript方法去加载javaScript文档解析
2017/11/08 jQuery
基于layui table返回的值的多级嵌套的解决方法
2019/09/19 Javascript
vue路由传参的基本实现方式小结【三种方式】
2020/02/05 Javascript
基于VUE实现判断设备是PC还是移动端
2020/07/03 Javascript
vue 组件基础知识总结
2021/01/26 Vue.js
[52:57]2014 DOTA2国际邀请赛中国区预选赛 LGD-CDEC VS HGT
2014/05/21 DOTA
Python面向对象之类的定义与继承用法示例
2019/01/14 Python
python3.x 生成3维随机数组实例
2019/11/28 Python
canvas环形倒计时组件的示例代码
2018/06/14 HTML / CSS
捷克鲜花配送:Florea.cz
2018/10/29 全球购物
简述索引存取方法的作用和建立索引的原则
2013/03/26 面试题
幼儿园教师培训方案
2014/02/04 职场文书
小学母亲节活动方案
2014/03/14 职场文书
世界名著读书笔记
2015/06/25 职场文书
英语投诉信范文
2015/07/03 职场文书
2019年干货:自我鉴定
2019/03/25 职场文书
如何书写民事调解协议书?
2019/06/25 职场文书