原生js制作页面长时间未操作退出登录

昨天一个同事问我，进入到一个页面后，这个时候不进行任何操作，然后15分钟后就自动退出登录，这个功能怎么实现？

电脑进入待机状态原理

说到这个问题，我觉得这个问题和电脑长时间未操作进入待机状态是一个原理，于是查了一下，发现电脑待机原理其实并不是在应用层进行控制的，而是通过相关电压和电流的判断来让电脑进入待机状态的。

自动退出登陆是什么原理呢？

其实不然，自动退出主要是通过判断键盘鼠标有没有操作来判断电脑的状态的。

所以具体原理： 获取鼠标和键盘 onmousemove 和 onkeydown 两个事件最后一次操作时间。这个时候你需要设置一个超时时间，接下来在判断两个事件最后一次的时间，和当前时间相比较。如果这个时间大于你设置的这个时间，则说明这个时候已经很久没有操作电脑了，你可以选择让用户退出登陆了。

<html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>页面无任何操作30秒后退出</title> <script language="JavaScript">var timerIdle=0;   //空闲时间
var timerBusy=0;   //倒计时开始
var timerIdle1=5;  //系统参数定义超时时间
var timerBusy1=30; //退出时间function timerTimeout(){timerIdle++;if (timerIdle>timerIdle1){if (timerBusy==0){timerBusy=timerBusy1+1;//view timerUIdocument.getElementById("timerUI").style.display="inline";   }timerBusy--;//view timerBusydocument.getElementById("_timerBusy").innerHTML=timerBusy;if (timerBusy<=0){timerExit();return;}}else{timerBusy=0;}window.setTimeout("timerTimeout()",1000);
}function timerUser(){//让div消失timerIdle=0;document.getElementById("timerUI").style.display="none";}function timerExit(){//超时处理.这里可以写自己需要执行的方法...document.getElementById("_timerBusy").innerHTML="Timeout";}window.setTimeout("timerTimeout()",1000);function mouseMove(ev){ev= ev || window.event;timerUser();var mousePos = mouseCoords(ev);}function mouseCoords(ev){if(ev.pageX || ev.pageY){return {x:ev.pageX, y:ev.pageY};}return {x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,y:ev.clientY + document.body.scrollTop - document.body.clientTop};
}document.onmousemove = mouseMove;document.onkeydown = mouseMove;</script> </head> <body> <div id="timerUI" style="position:absolute; left:30px; top:30px; font-size:20px;"> <table width="300" border="0" cellspacing="0" cellpadding="0"> <tbody><tr> <td nowrap="" align="right" id="_timerBusy" style=" font-size:36px; font-weight:bold; color:#FF0000;"></td> <td nowrap="" align="left">&nbsp;秒后将退出系统</td> </tr> <tr> <td nowrap="" align="right"></td> <td nowrap="" align="right"></td> <td nowrap="" align="left">&nbsp;如继续操作点任意键即可</td> </tr> <tr> <td nowrap="" align="right"></td> <td nowrap="" align="right"></td> <td nowrap="" align="left">&nbsp;(系统检测到您长时间未进行任何操作,为保护您的信息安全将自动退出)</td> </tr> </tbody></table> </div>  </body>
</html>

原生js制作页面长时间未操作退出登录相关推荐

VUE实现长时间未操作退出登录
背景:在现在大多系统中,为了保障用户的安全,都会有固定时间未操作则自动退出登录的功能,这里根据我目前了解的内容大致实现一个简单的. 我的想法是这样,通过对定时器setTimeOut的使用,来进行倒计时 ...
页面长时间未操作，实现自动退出登录原理
项目场景: 页面长时间未操作的时候,会自动退出登录,并且提示你的登录已过期,需重新登录.那这个是怎么实现的呢? 两种方案第一种是完全由后端实现的,后台在servlet可以获取到session,可以设 ...
web 页面长时间未操作自动退出方法（自动退出登录）
web 页面自动超时自动退出方法思路: 使用 mouseover 事件来监测是否有用户操作页面,写一个定时器间隔特定时间检测是否长时间未操作页面,如果是,退出: 具体时间代码如下(js): var ...
vue 上次登录时间_vue实现登录之后长时间未操作，退出登录
效果如下: vue实现用户登录系统之后,长时间未操作,提示登录超时,直接退出登录,跳转至登录页面. app.vue: import {mapActions } from 'vuex'; import ...
如何处理电脑长时间未操作出现的假死？
如何处理电脑长时间未操作出现的假死? 我们平时经常会遇到由于长时间未操作电脑,再使用时只有鼠标光标可以移动,桌面上的图标无法响应,包括任务栏的程序,那么我们应该怎么处理比较得当呢? 尝试使用光盘插拔动 ...
vue 上次登录时间_Vue设置长时间未操作登录自动到期返回登录页
Vue设置长时间未操作登录以后自动到期返回登录页首先我们写在main.js文件中 import routerUtil from "@/utils/routerutil";//先将 ...
php到期自动过期,PHP实现页面长时间无操作，自动过期函数
PHP实现页面长时间无操作,自动过期函数发布于 2015-01-13 19:55:41 | 878 次阅读 | 评论: 0 | 来源: 网友投递 PHP开源脚本语言PHP(外文名: Hypertex ...
Mac电脑设置长时间不用自动退出登录
如果你很懒每日工作后不想关机,尽管macOS可以设置自动休眠但是每天重新开机后,软件还是开启的,时间太久电脑容易变卡,怎么设置让电脑休眠后退出登录达到重启的效果呢? 小编教你怎么设置macOSMac电 ...
页面停留长时间不操作，一定时间退出系统
let lastTime = new Date().getTime() let currentTime = new Date().getTime() let timeOut = 30 * 60 * 1 ...

原生js制作页面长时间未操作退出登录

电脑进入待机状态原理

自动退出登陆是什么原理呢？

原生js制作页面长时间未操作退出登录相关推荐

最新文章

热门文章