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

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

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