页面监听,一段时间内不操作网页,就自动跳转到登录页

需求:用户在 5 分钟内没有操作网页,就自动跳转到登录页。

环境:jquery 项目,有公共的 js 文件 。

在所有页面都引用的 js 文件中添加下面代码:

//判断用户是否在5分钟内未操作页面,如果没有操作,则跳转到登录页
var lastTime = new Date().getTime();
var currentTime = new Date().getTime();
var timeOut = 5*60*1000; //设置超时时间: 5分钟
$(function(){/* 鼠标移动事件 */$(document).mouseover(function(){lastTime = new Date().getTime(); //更新操作时间});
});
/* 定时器  间隔1秒检测是否长时间未操作页面  */
var timer = window.setInterval(testTime, 1000);
function testTime(){currentTime = new Date().getTime(); //更新当前时间if(location.href.substring(location.href.length-10) == "login.html"){ //登录页clearInterval(timer);  //关闭定时器console.log("当前所在页为登录页,不需要跳转");} else {if(currentTime - lastTime > timeOut){ //判断是否超时---超时clearInterval(timer); var src = window.top.location.href.substring(0, location.href.length-10); //【注1】//跳转到outline,提示用户跳转,可在后台进行销毁session;location.href = src + "outline.html"; //没有这个页面的可以直接跳转到登录页【注2】	  } }		
}

注意:

  1. window.top 获取到父页面的信息,即 index.html 页,因为 index.html 和 login.html 同级,所以只要把 index.html 的路由信息中的 index 改为 login,就可以跳转到 login.html页面。
  2. outline.html 是一个中转站页面,目的是为了不让页面跳转太过生硬。没有这个页面的可以直接把代码中的 outline.html 改为 login.html;
  3. substring(start, end); 方法用来截取字符串,返回一个新字符串,不影响原数组。start 是开始位置(从0开始),end 表示结束位置。

 outline.html


<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" /><style type="text/css">
* {margin: 0;padding: 0;}
/*手机*/
@media screen and (max-width: 600px) {.mBody .fresh { position: absolute; left: 35%; top: 70%; width: 30%; }
}
/*平板*/
@media screen and (min-width: 600px) and (max-width: 960px) {.mBody .fresh { position: absolute; left: 35%; top: 78%; width: 30%; }
}
/*电脑*/
.pcBody { background: url(images/tips/bg.png);background-position-y: -150px; width: 100%; height: 100%; overflow: hidden; }.pcContent {width: 700px;margin: 265px auto;}
.pcContent h1 {font-size: 36px;color: #cb9f63;line-height: 60px;}
.pcContent p {font-size: 18px;color: #66686A;line-height: 24px;}
.pcContent p a {color: #cb9f63;}
</style><body><div class="pcContent"><h1>由于您长时间未操作,请重新登录!</h1><p style="text-align: center;"><span id='second' style="color: red; font-size: 20px;"></span>s后,您将返回<a href="../login.html">登录</a>页面。</p></div>
</body><script src="plugins/jquery-3.1.1.min.js" type="text/javascript" charset="utf-8"></script><script>(function(){var system ={};var p = navigator.platform;       system.win = p.indexOf("Win") == 0;  system.mac = p.indexOf("Mac") == 0;  system.x11 = (p == "X11") || (p.indexOf("Linux") == 0);     if(system.win||system.mac||system.xll){//如果是电脑document.getElementsByTagName("body")[0].className="pcBody";    }else{  //如果是手机或平板var body=document.getElementsByTagName("body")[0];body.className="mBody";body.innerHTML='<img class="fresh" src="../common/tips/fresh.png" onclick="history.go(0)">';}})();var count=3; //3秒钟后跳转到登录页$("#second").text(count+'');var timer = setInterval(go,1000);function go(){count--;if(count==0) {clearInterval(timer);window.location.href="login.html";}else{$("#second").text(count+'');}}</script>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/362440.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

页面刷新 vuex 数据重新被初始化

1、原因 vuex里用来存储的也只是一个全局变量&#xff0c;当页面刷新&#xff0c;该全局变量自然不存在了。 2、解决 使用localStorage存储一份 &#xff08;1&#xff09;storage.js /*** vuex localStorage plugin*/const IS_ALL 0export default function storagePlugi…

小程序 循环中有多个input,怎么获取每个input输入框的值

像上面这样的&#xff0c;使用form表单结构不太合理。官方文档中 wx.createSelectorQuery() 方法我这里总是打印不出值&#xff0c;所以只好通过输入框的事件来做判断&#xff0c;因为提交时&#xff0c;上面所有的输入框都是要有值的&#xff0c;也就意味着这些输入框都会使用…

了解JUnit的Runner架构

几周前&#xff0c;我开始创建一个小的JUnit Runner&#xff08; Oleaster &#xff09;&#xff0c;它允许您使用Jasmine方式在JUnit中编写单元测试。 我了解到&#xff0c;创建自定义JUnit Runners实际上非常简单。 在本文中&#xff0c;我想向您展示JUnit Runner在内部如何工…

琼瑶哀悼丈夫去世

转载于:https://www.cnblogs.com/gitwow/p/10982911.html

vue 简单实用的elementUI表格封装

在写这个表格组件之前&#xff0c;要了解 slot 插槽的使用。 目录 1.子组件&#xff1a;子组件调用父组件的方法 this.$parent.方法名 2.父组件使用 2.1 父组件&#xff08;普通表格&#xff09;&#xff1a; 2.2 父组件&#xff08;表格中的某一项数据需要修改&#xff0…

【学习】012 垃圾回收机制算法分析

垃圾回收机制概述 Java语言中一个显著的特点就是引入了垃圾回收机制&#xff0c;使c程序员最头疼的内存管理的问题迎刃而解&#xff0c;它使得Java程序员在编写程序的时候不再需要考虑内存管理。由于有个垃圾回收机制&#xff0c;Java中的对象不再有“作用域”的概念&#xff0…

介绍JBoss BPM Suite安装程序

本周&#xff0c;我们想向您介绍JBoss BRMS和JBoss BPM Suite产品随附的一个鲜为人知的安装程序组件。 请注意&#xff0c;当前所有的演示项目都要求您下载JBoss BPM Suite可部署的eap zip产品文件和JBoss EAP 6.1.1 zip产品文件。 展望未来&#xff0c;我们将迁移所有项目&am…

自动装箱,拆箱和NoSuchMethodError

J2SE 5为Java编程语言引入了许多功能。 这些功能之一是自动装箱和拆箱 &#xff0c;这是我几乎每天都没有考虑过的功能。 它通常很方便&#xff08;尤其是与收藏夹一起使用时&#xff09;&#xff0c;但有时会导致一些令人讨厌的惊喜 &#xff0c;即“ 怪异 ”和“ 疯狂” 。 在…

vue 动态显示三级路由

无需 vuex、本地存储实现动态显示三级路由。 目录 一、需求描述&#xff1a; 二、代码 2.1 路由配置 1. 我的一级菜单和二级菜单的路由配置的&#xff1a; 2. 三级菜单的路由配置&#xff1a; 3. 上面有几个变量和要注意的细节&#xff1a; 2.2 封装导航栏 2.3 封装面…

第二章 Vue快速入门-- 18 v-for中key的使用注意事项

注意:如果属性和方法还没定义直接使用的话&#xff0c;就会报 xxx is not defined 导致界面不能正常显示。我看视频教程里老师的可以直接使用&#xff0c;而且界面正常显示&#xff0c;可能是vue版本不同吗&#xff1f;还不清楚 1 <!DOCTYPE html>2 <html lang"…

vue 后端返回二进制流文件,前端如何实现下载?

目录 1. axios 请求二进制流文件导出文件 1.1 后台返回的二进制流&#xff1a; 1.2 使用&#xff1a; 1.3 需要注意以下几点&#xff1a; 2. 关于 arraybuffer 和 blob 2.1 ArrayBuffer 和 blob 2.2 区别 2.3 相互转换 3. 主要参考&#xff1a; 1. axios 请求二进制…

python量化之路:获取历史某一时刻沪深上市公司股票代码及上市时间

python量化之路&#xff1a;获取历史某一时刻沪深上市公司股票代码及上市时间 最近开始玩股票量化&#xff0c;由于想要做完整的股票回测&#xff0c;因此股票的上市和退市信息就必不可少。因为我们回测的时候必须要知道某一日期沪深股票的成分包含哪些对吧。所以我们要把沪深全…

《网页设计创意书》读后感

刚刚收到《网页设计创意书》&#xff0c;确实有点惊喜&#xff0c;开始以为是像之前审读的书一样是一叠叠的打印纸&#xff0c;没想到是一本成品书&#xff0c;拿到手上沉甸甸的&#xff0c;随便翻看了一下&#xff0c;没想到里面竟然还是全彩页印刷的&#xff0c;本书的第一感…

游戏AI –行为树简介

游戏AI是一个非常广泛的主题&#xff0c;尽管有很多资料&#xff0c;但我找不到能以较慢&#xff0c;更容易理解的速度缓慢介绍这些概念的东西。 本文将尝试解释如何基于行为树的概念来设计一个非常简单但可扩展的AI系统。 什么是AI&#xff1f; 人工智能是参与游戏的实体表现…

liteos错误处理(十一)

1. 概述 1.1 基本概念 错误处理指用户代码发生错误时&#xff0c;系统调用错误处理模块的接口函数&#xff0c;完成上报错误信息&#xff0c;并调用用户自己的钩子函数&#xff0c;进行特定的处理。 错误处理模块实现OS内部错误码记录功能。OS内部错误码无法通过接口返回&#…

js 变量提升与函数提升

规则&#xff1a; 函数的提升优先于变量提升。同名的函数会覆盖同名的函数与变量。同名的变量不会覆盖同名的函数。 示例代码1&#xff1a; <!DOCTYPE html><html lang"zh"><head><meta charset"UTF-8" /><meta name"vi…

mockJs文档(一)

Mock.js 官网 目录 1. 开始安装 1.1 Node&#xff08;CommonJS&#xff09; 1.2 CMD方式 2. 语法规范 2.1 数据模板定义规范 DTD 2.1.1. 属性值是字符串 String 2.1.2. 属性值是数字 Number 2.1.3. 属性值是布尔型 Boolean 2.1.4. 属性值是对象 Object 2.1.5. 属性值…

小程序 获取手机号

【参考小程序开发文档&#xff1a;开发-指南-开放能力-用户信息-获取手机号】 地理位置 wx.getLocation(Object object) | 微信开放文档 手机号 获取手机号 | 微信开放文档 微信信息 小程序与小游戏获取用户信息接口调整&#xff0c;请开发者注意升级。 | 微信开放社区 目录…

CSS布局之脱离文档流详解——浮动、绝对定位脱离文档流的区别

1、代码 &#xff08;1&#xff09;示例代码1 <!DOCTYPE html><html lang"zh"><head><meta charset"UTF-8" /><meta name"viewport" content"widthdevice-width, initial-scale1.0" /><meta http-e…

小程序 获取当前城市位置-高德地图

微信小程序 wx.getLocation 只能获取到经纬度&#xff0c;想要获取具体城市信息&#xff0c;需要使用地图插件。公司要求使用 高德地图&#xff0c;在使用上&#xff0c;几个地图的代码步骤都差不多。 目录 1. 查看官方文档 1.1 申请高德地图Key&#xff0c;点击查看申请key…