返回顶部
首页 > 资讯 > 前端开发 > JavaScript >js实现自动锁屏功能
  • 487
分享到

js实现自动锁屏功能

2024-04-02 19:04:59 487人浏览 八月长安
摘要

1.使用场景 有这么一个需求,开发了一套系统,当用户离开桌面或者一段时间不操作的话,需要把该系统所有打开页面锁定起来,就跟桌面锁屏一样,只能输入密码验证成功后,或者重新登录,才可以

1.使用场景

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

5s锁屏效果如下:

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 自动锁屏 内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

--结束END--

本文标题: js实现自动锁屏功能

本文链接: https://lsjlt.com/news/127396.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • js实现自动锁屏功能
    1.使用场景 有这么一个需求,开发了一套系统,当用户离开桌面或者一段时间不操作的话,需要把该系统所有打开页面锁定起来,就跟桌面锁屏一样,只能输入密码验证成功后,或者重新登录,才可以...
    99+
    2024-04-02
  • 使用JavaScript怎么实现自动锁屏功能
    这篇文章将为大家详细讲解有关使用JavaScript怎么实现自动锁屏功能,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。1.使用场景有这么一个需求,开发了一套系统,当用户离开桌面或者一段时间不...
    99+
    2023-06-15
  • 原生js实现简单滑动解锁功能 js实现滑动拼图解锁
    本文实例为大家分享了js实现简单滑动解锁功能以及滑动拼图解锁的具体代码,供大家参考,具体内容如下 简单实现滑动解锁,效果图是这样的 <!DOCTYPE html> &l...
    99+
    2024-04-02
  • win7怎么开启自动锁屏功能
    这篇文章主要介绍“win7怎么开启自动锁屏功能”,在日常操作中,相信很多人在win7怎么开启自动锁屏功能问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”win7怎么开启自动锁屏功能”的疑惑有所帮助!接下来,请跟...
    99+
    2023-06-28
  • 轻松实现Android锁屏功能
    锁屏需要引入设备超级管理员。在文档Android开发文档的Administration中有详细的说明。Android设备管理系统功能和控制访问。 主要有一下几个步骤: 1&nb...
    99+
    2022-06-06
    android锁屏 Android
  • Android实现一键锁屏功能
    android实现一键锁屏 创建AdminReceiver import android.app.admin.DeviceAdminReceiver; public class Ad...
    99+
    2022-11-13
    android一键锁屏 android锁屏
  • Python+uiautomator2实现手机锁屏解锁功能
    业务需求:需要测试手机滑动解锁失败时事件的次数及等待的时间,本来想利用Python+Appium实现,但是Appium运行时自动给我解锁了.... 部分解释摘抄自:https://testerhome.com/top...
    99+
    2022-06-02
    python uiautomator2手机锁屏解锁 python 手机锁屏 python手机解锁
  • HTML+JS实现监控切屏功能
    目录项目描述记录离开页面创建html监控是否离开页面监控是否切屏记录时间离开次数项目描述 该项目是我在网上看其他博客的时候无意中看到的,看见别人居然能实现这种操作很好奇 项目要求做到...
    99+
    2024-04-02
  • 腾讯云服务器关闭自动锁屏功能
    如果腾讯云服务器关闭自动锁屏功能,那么您可能需要手动设置以启用这一功能。以下是一些步骤: 在控制台或服务器管理页面中打开“云服务器控制台”或“服务器列表”。 在弹出的“设置”对话框中,选择“启用自动锁定屏幕”选项卡。 在“启用锁定屏幕”...
    99+
    2023-10-26
    腾讯 功能 服务器
  • 腾讯云服务器关闭自动锁屏功能吗
    腾讯云服务器关闭自动锁屏功能需要您确认以下几点: 服务是否正常运行:当腾讯云服务器关闭自动锁屏功能时,它会弹出提醒窗口,提示您确认是否需要重新启动云服务器。在确认后,您可以按照提示重新启动云服务器,以确保您的账户和数据正常使用。 您的数...
    99+
    2023-10-26
    腾讯 功能 服务器
  • vue实现滑动解锁功能
    本文实例为大家分享了vue实现滑动解锁功能的具体代码,供大家参考,具体内容如下 话不多说,直接上代码; <template>   <div>     &...
    99+
    2024-04-02
  • JS如何实现两周内自动登录功能
    这篇文章将为大家详细讲解有关JS如何实现两周内自动登录功能,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。具体内容如下<!DOCTYPE html> ...
    99+
    2024-04-02
  • 腾讯云服务器关闭自动锁屏功能怎么办
    如果腾讯云服务器关闭了自动锁屏功能,您可以按照以下步骤进行操作: 1.首先,您可以通过腾讯云控制台的“设置-通用-设置向导”来开启自动锁屏功能。 2.在设置向导中,您可以选择开启自动锁屏功能的方式,比如使用腾讯云自带的应用助手等。 3.如...
    99+
    2023-10-26
    腾讯 功能 服务器
  • 怎么用HTML+JS实现监控切屏功能
    这篇文章主要介绍“怎么用HTML+JS实现监控切屏功能”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“怎么用HTML+JS实现监控切屏功能”文章能帮助大家解决问题。项目描述项目要求做到监控网页状态记录...
    99+
    2023-06-29
  • JS+Canvas实现自定义头像功能
    目录写在最前成果展示Git地址功能说明实现细节相关依赖写在最后写在最前 前两天老大跟我说老虎官网上那个自定义头像的功能是flash实现的,没有安装过的还得手动去“允许&r...
    99+
    2024-04-02
  • vue怎么实现滑动解锁功能
    本文小编为大家详细介绍“vue怎么实现滑动解锁功能”,内容详细,步骤清晰,细节处理妥当,希望这篇“vue怎么实现滑动解锁功能”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。效果如下话不多说,直接上代码;<te...
    99+
    2023-06-29
  • Android 监听锁屏、解锁、开屏 功能代码
    1、首先定义 ScreenListener package com.app.lib; import android.content.BroadcastReceiver; i...
    99+
    2022-06-06
    监听 锁屏 解锁 Android
  • iOS滑动全屏实现返回功能
    本文实例为大家分享了iOS滑动全屏实现返回功能的具体代码,供大家参考,具体内容如下 系统自带的滑动返回功能,只能滑动边缘返回,而我们希望通过滑动全屏实现返回功能。 定义BaseNav...
    99+
    2022-06-02
    iOS 滑动 返回
  • jQuery怎么实现整屏滚动功能
    这篇文章主要介绍“jQuery怎么实现整屏滚动功能”,在日常操作中,相信很多人在jQuery怎么实现整屏滚动功能问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”jQuery怎么...
    99+
    2024-04-02
  • Win10创造者15002新增智能锁屏 用户离开自动锁屏
    在Win10创造者更新15002预览版设置中新增了“自动锁定电脑”选项,该功能可以在发现用户离开电脑后自动锁定电脑,防止系统被他人操控。 用户可以在设置→账户→登录选项中找到...
    99+
    2023-05-22
    锁屏 Win10
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作