【通过javascript实现:长时间未对html页面操作,自动退出系统,返回至login.html】

功能:针对某html页面,如果长时间没有对页面进行任何操作,则退出系统,返回至login.html

思路分析:

step1 设置超时时间:timeoutDuration=10分钟,因为是以毫秒为单位,所以需要乘以1000

step2 设置超时后做的一系列操作:logout()

step3 设置超时函数:setTimeout(logout, timeoutDuration),超过10分钟,触发

step4 设置重置超时函数:resetTimeout(),当页面有鼠标操作时,需要清除先前的超时函数,重新设置超时函数

step5 监听页面操作,触发重置:mousemove鼠标移动,keydown键盘点击,click窗口点击

代码如下:

//step1 设置超时时间
let timeoutDuration = 10 * 60 * 1000;  //10min
//step2 超时后做的操作
function logout(){localStorage.clear();        //清除本地存储(如果用到setItem,可进行操作,也可省略该步)location.href = 'login.html';  //跳转login.html
}
//step3 设置超时函数
let timeout = setTimeout(logout, timeoutDuration);
//step4 设置重置超时函数
function resetTimeout(){clearTimeout(timeout);timeout = setTimeout(logout, timeoutDuration);  
}
//step5 监听页面操作,触发重置超时函数
window.addEventListener("mousemove", resetTimeout);
window.addEventListener("keydown", resetTimeout);
window.addEventListener("click", resetTimeout);
resetTimeout();

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

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

相关文章

第 121 场 LeetCode 双周赛题解

A 大于等于顺序前缀和的最小缺失整数 模拟&#xff1a;先求最长顺序前缀的和 s s s &#xff0c;然后从 s s s 开始找没有出现在 n u m s nums nums 中的最小整数 class Solution { public:int missingInteger(vector<int> &nums) {unordered_set<int> vis(…

JavaScript 变量

在JavaScript中&#xff0c;变量是一种存储数据的容器。它们可以存储任何类型的数据&#xff0c;包括数字、字符串、布尔值、对象、数组等。 在JavaScript中&#xff0c;变量是通过使用var、let或const关键字来声明的。 以下是声明和初始化变量的基本语法&#xff1a; 使用v…

如何批量自定义视频画面尺寸

在视频制作和编辑过程中&#xff0c;对于视频画面尺寸的调整是一项常见的需求。有时候&#xff0c;为了适应不同的播放平台或满足特定的展示需求&#xff0c;我们需要对视频尺寸进行批量调整。那么&#xff0c;如何实现批量自定义视频画面尺寸呢&#xff1f;本文将为您揭示这一…

LLM之RAG实战(十三)| 利用MongoDB矢量搜索实现RAG高级检索

想象一下&#xff0c;你是一名侦探&#xff0c;身处庞大的信息世界&#xff0c;试图在堆积如山的数据中找到隐藏的一条重要线索&#xff0c;这就是检索增强生成&#xff08;RAG&#xff09;发挥作用的地方&#xff0c;它就像你在人工智能和语言模型世界中的可靠助手。但即使是最…

小心JDK20 ZipOutputStream

Oracle 團隊竟然這麽粗心&#xff0c;編譯JDK 20 時ZipOutputStream沒有編譯成功就發佈了。 所以這個20版本不可以使用ZipOutputStream。 GZIPInputStream 只能做最後的壓縮&#xff0c;不能添加多個附件ZipEntry。 下一個版本21不存在這個問題。 try(var zipOut new ZipOu…

数据分析——火车信息

任务目标 任务 1、整理火车发车信息数据&#xff0c;结果的表格形式为&#xff1a; 2、并输出最终的发车信息表 难点 1、多文件 一个文件夹&#xff0c;多个月的发车信息&#xff0c;一个excel&#xff0c;放一天的发车情况 2、数据表的格式特殊 如何分析表是一个难点 数…

案例102:基于微信小程序的旅游社交管理系统设计与实现

文末获取源码 开发语言&#xff1a;Java 框架&#xff1a;SSM JDK版本&#xff1a;JDK1.8 数据库&#xff1a;mysql 5.7 开发软件&#xff1a;eclipse/myeclipse/idea Maven包&#xff1a;Maven3.5.4 小程序框架&#xff1a;uniapp 小程序开发软件&#xff1a;HBuilder X 小程序…

解决VMware 虚拟机 ubuntu 20.04 异常关闭导致虚拟网卡 ens33 无法工作问题

问题描述 由于经常使用 SSH 远程链接 VMware 中的虚拟机 ubuntu&#xff0c;每次关闭都是挂起&#xff0c;时间久了&#xff0c;虚拟机运行有些卡顿了&#xff0c;此时可以通过 Linux 命令重启或者关闭 ubuntu&#xff0c;也可以之间使用 VMWare 中的【虚拟机】-- 【电源】-&g…

如何查看超算上不同节点上CPU利用率、运行情况

CPU利用率查看方法 打开命令行,输入命令 ssh [节点名] # 可通过squeue确认节点名 top # 查看cpu实时利用率同时按CtrlC退出top检测界面。 再在命令行输入 exit退出该节点。 查询自己的作业运行的节点名 打开命令好&#xff0c;输入命令 squeue在nodelist里可以…

【JavaEE】深入理解Java线程池- 多线程篇(12)

文章目录 摘要一、线程池参数的介绍二、线程池的工作流程三、使用Executors创建常见线程池总结 摘要 本文将对Java线程池的参数、工作流程以及使用Executors创建常见线程池进行详细总结&#xff0c;帮助读者深入理解线程池的概念和应用。 一、线程池参数的介绍 线程池的核心…

目标检测YOLO实战应用案例100讲-雾天环境下目标检测

目录 前言 国内外研究现状 图像去雾算法的研究

微服务管家:NestJS 如何使用服务发现 Consul 实现高效的微服务节点管理

前言 在微服务架构中&#xff0c;服务发现是一项基础且关键的功能&#xff0c;它允许服务实例在网络中被动态发现。Consul 是一种服务网格解决方案&#xff0c;提供了服务发现、运行状况检查&#xff0c;过去和现代应用程序的连接等功能。 本教程将向您展示如何在 NestJS 框架…

大津法(OTSU)点云强度信息分割

目录 一、相关介绍 二、计算方法 三、实现代码 四、运行结果 一、相关介绍 大津法是一种灰度图像自适应的阈值分割方法,1979年由日本学者大津提出。大津法根据图像的灰度分布,将图像分成背景和前景两部分,前

SiC电机控制器(逆变器)发展概况及技术方向

SiC电机控制器&#xff08;逆变器&#xff09;发展概况及技术方向 1.概述2.电动汽车动力系统设计趋势3.栅极驱动器和驱动电源配置4.结论 tips&#xff1a;资料来自网上搜集&#xff0c;仅供学习使用。 1.概述 2022年到2023年&#xff0c;第三代半导体碳化硅被推上了新的热潮。…

前端uniapp的tab选项卡for循环切换、开通VIP实战案例【带源码/最新】

目录 效果图图1图2 源码最后 这个案例是uniapp&#xff0c;同样也适用Vue项目&#xff0c;语法一样for循环&#xff0c;点击切换 效果图 图1 图2 源码 直接代码复制查看效果 <template><view class"my-helper-service-pass"><view class"tab…

【Vue】灵魂拷问

1、说说Vue的优缺点 优点&#xff1a;渐进式&#xff0c;组件化&#xff0c;轻量级&#xff0c;虚拟dom&#xff0c;响应式&#xff0c;单页面路由&#xff0c;数据与视图分开缺点&#xff1a;单页面不利于seo&#xff0c;不支持IE8以下&#xff0c;首屏加载时间长 2、为什么…

第14课 利用openCV快速数豆豆

除了检测运动&#xff0c;openCV还能做许多有趣且实用的事情。其实openCV和FFmpeg一样都是宝藏开源项目&#xff0c;貌似简单的几行代码功能实现背后其实是复杂的算法在支撑。有志于深入学习的同学可以在入门后进一步研究算法的实现&#xff0c;一定会受益匪浅。 这节课&#…

(Python + Selenium4)Web自动化测试自学Day1

目录 文章声明⭐⭐⭐让我们开始今天的学习吧&#xff01;自动打开Chrome浏览器实现自动搜索元素定位常用的元素定位方式By.IDBy.CLASS_NAMEBy.TAG_NAMEBy.NAMEBy.LINK_TEXTBy.PARTIAL_LINK_TEXTBy.CSS_SELECTOR根据id定位根据class定位根据属性定位组合定位 By.XPATH 文章声明⭐…

js的for嵌套和数组的map+some两种方法实现两个对象数组进行比对,得到一个期望的新数组

项目需求有个数据需要处理,现有两个数组arr1和arr2,其中 arr1为[“香蕉”, “苹果”, “梨子”],arr2为 [{ checked: true, name: “苹果” }] ,现在想实现的目的是,只要有arr1里的项与arr2项里的name一致的话就将其checked设为true,否则设为false,最终得到的数组是arr3,…

#error 在C语言中的作用

1、#error命令是C/C语言的预处理命令之一 #error 是C语言中的预处理指令之一&#xff0c;用于在编译时生成一个错误消息。当编译器遇到 #error 指令时&#xff0c;会立即停止编译&#xff0c;并将指定的错误消息输出到编译器的错误信息中。 在给定的代码中&#xff0c;#error…