LOGO OA教程 ERP教程 模切知识交流 PMS教程 CRM教程 开发文档 其他文档  
 
网站管理员

如何使用 JS 判断用户是否处于活跃状态


2024年5月18日 15:25 本文热度 219

有时候,我们需要在网页判断用户是否处与非活跃状态,如果用户长时间没有在页面上进行任何操作,我们则判定该用户是非活跃的。 在 javascript 中我们可以通过监听某些鼠标或键盘相关的事件来判定用户是否在活跃中。

案例演示

在线演示 - 使用 JS 判断用户是否处于活跃状态

实现代码

案例演示了如何获取用户活跃状态,时间阈值定为5秒,超出该阈值没有操作表示非活跃,否则属于正在活跃中

html

<p id="userState"></p>


js

//活跃状态,true活跃中,false非活跃

let state = false;

//定时器

let timer = null;

//非活跃判定阈值,5秒没有任何活动表示非活跃

let timeout = 5000;

//用于展示状态信息的html元素

let userStateEl = document.getElementById('userState');


//批量添加事件监听

[

    'mousemove',    //鼠标移动

    'mousedown',    //鼠标按下

    'touchstart',   //触摸屏幕(移动端)

    'wheel',        //鼠标滚轮

    'resize',       //页面尺寸变化

    'keydown',      //键盘输入

]

.map(event =>{

    window.addEventListener(event, onActive)

})


//触发活跃中

function onActive(){

    //更新状态

    state = true;

    renderState();

    //重置定时器

    clearTimeout(timer);

    timer = setTimeout(() =>{

        state = false;

        renderState();

    }, timeout);

}


//更新状态信息

function renderState(){

    if(state){

        userStateEl.textContent = "活跃中 "

    } else {

        userStateEl.textContent = "❌非活跃状态"

    }

}


//立刻触发一次活跃中

onActive();

下载案例源码

 




该文章在 2024/5/20 9:23:27 编辑过
关键字查询
相关文章
正在查询...
点晴ERP是一款针对中小制造业的专业生产管理软件系统,系统成熟度和易用性得到了国内大量中小企业的青睐。
点晴PMS码头管理系统主要针对港口码头集装箱与散货日常运作、调度、堆场、车队、财务费用、相关报表等业务管理,结合码头的业务特点,围绕调度、堆场作业而开发的。集技术的先进性、管理的有效性于一体,是物流码头及其他港口类企业的高效ERP管理信息系统。
点晴WMS仓储管理系统提供了货物产品管理,销售管理,采购管理,仓储管理,仓库管理,保质期管理,货位管理,库位管理,生产管理,WMS管理系统,标签打印,条形码,二维码管理,批号管理软件。
点晴免费OA是一款软件和通用服务都免费,不限功能、不限时间、不限用户的免费OA协同办公管理系统。
Copyright 2010-2024 ClickSun All Rights Reserved