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 相关文章推荐
Mootools 1.2教程 设置和获取样式表属性
Sep 15 Javascript
表单JS弹出填写提示效果代码
Apr 16 Javascript
js单例模式详解实例
Nov 21 Javascript
如何书写高质量jQuery代码(使用jquery性能问题)
Jun 30 Javascript
JavaScript实现简单的二级导航菜单实例
Apr 15 Javascript
asp知识整理笔记3(问答模式)
Sep 27 Javascript
全面了解javascript三元运算符
Jun 27 Javascript
JavaScript String(字符串)对象的简单实例(推荐)
Aug 31 Javascript
详解es6超好用的语法糖Decorator
Aug 01 Javascript
jsonp跨域及实现百度首页联想功能的方法
Aug 30 Javascript
在vue项目中使用sass语法问题
Jul 18 Javascript
小程序中设置缓存过期的实现方法
Jan 14 Javascript
如何将JavaScript将数组转为树形结构
Jun 02 #Javascript
关于antd tree 和父子组件之间的传值问题(react 总结)
使用react+redux实现计数器功能及遇到问题
微信小程序基础教程之echart的使用
vue实现水波涟漪效果的点击反馈指令
vue 实现上传组件
May 31 #Vue.js
vue基于Teleport实现Modal组件
You might like
PHP字符编码问题之GB2312 VS UTF-8解决方法
2011/06/23 PHP
PHP实现QQ登录实例代码
2016/01/14 PHP
smarty循环嵌套用法示例分析
2016/07/19 PHP
thinkphp框架page类与bootstrap分页(美化)
2017/06/25 PHP
laravel实现图片上传预览,及编辑时可更换图片,并实时变化的例子
2019/11/14 PHP
JavaScript 输入框内容格式验证代码
2010/02/11 Javascript
jQuery与ExtJS之选择实例分析
2010/08/19 Javascript
JavaScript实现点击按钮直接打印
2016/01/06 Javascript
jQuery链式调用与show知识浅析
2016/05/11 Javascript
BootStrap使用popover插件实现鼠标经过显示并保持显示框
2016/06/23 Javascript
JavaScript数组复制详解
2017/02/02 Javascript
vue.js树形组件之删除双击增加分支实例代码
2017/02/28 Javascript
jQuery实现Select下拉列表进行状态选择功能
2017/03/30 jQuery
node文件上传功能简易实现代码
2017/06/16 Javascript
自定义事件解决重复请求BUG的问题
2017/07/11 Javascript
详解如何构建Promise队列实现异步函数顺序执行
2018/10/23 Javascript
基于JS实现父组件的请求服务过程解析
2019/10/14 Javascript
如何在 Vue 中使用 JSX
2021/02/14 Vue.js
python访问纯真IP数据库的代码
2011/05/19 Python
Python爬虫实现vip电影下载的示例代码
2020/04/20 Python
Python绘制数码晶体管日期
2021/02/19 Python
探索HTML5本地存储功能运用技巧
2016/03/02 HTML / CSS
悬挂训练绳:TRX
2017/12/14 全球购物
医院护理人员的自我评价分享
2013/10/04 职场文书
毕业生求职简历的自我评价
2013/10/07 职场文书
大学生自我评价范文分享
2014/02/21 职场文书
关于中国梦的演讲稿
2014/04/23 职场文书
小学教师师德演讲稿
2014/05/06 职场文书
企业贷款委托书格式
2014/09/12 职场文书
小学优秀教师材料
2014/12/15 职场文书
先进集体申报材料
2014/12/25 职场文书
计算机专业自荐信
2015/03/05 职场文书
交通事故起诉书
2015/05/19 职场文书
创业计划书之儿童理发店
2019/09/27 职场文书
2019朋友新婚祝福语精选
2019/10/10 职场文书
聊聊redis-dump工具安装问题
2022/01/18 Redis