使用 JS 判断用户是否处于活跃状态，HTML/Vue代码在线实时编辑、预览

<div> <h2>当前状态：</h2> <p id="userState"></p> <span> 5秒内不进行任何操作则显示非活跃状态 </span> </div>

body { height: 100vh; display: flex; align-items: center; justify-content: center; background: #eff; } span { font-size:.85em;color:#999 }

            
                1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

            
            //活跃状态，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();