JavaScript记录鼠标最后一次点击页面_JS/JQuery

需求

最近做了一个项目，需要在网页中实现类似系统的待机动画那种效果，每隔2分钟页面没有任何操作就播放一个视频，所以需要记录鼠标的最后一次操作。

实现方法

针对这个需要，我的实现方法通过一个倒计时去模拟记录鼠标的最后一次点击，

给body加一个onclick事件^{(或其他的dom节点)}，每次点击先清除倒计时，在执行这个倒计时，下边是倒计时部分代码，一共4个参数：

倒数时间：秒
计时期间需要做的事情
计时结束需要做的事情
倒计时的名字

实现代码

function countDown (during, duringCallback, endCallback, timer) {
  during = +during;
  if (during > 0) {
    duringCallback(during);
    during--;
    window[timer] = setTimeout(() => {
      countDown(during, duringCallback, endCallback, timer);
    }, 1000)
  } else {
    clearTimeout(window[timer]);
    endCallback();
  }}

示例代码

<!DOCTYPE html><html lang="en"><head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>js实现待机动画</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    html,
    body {
      width: 100%;
      height: 100%;
    }
    .standby {
      display: none;
    }
  </style></head><body>
  <p class="total">点击计数：<span></span></p>
  <p class="count-down">倒计时5秒==>：<span></span></p>
  <p class="standby">我是待机动画</p>
  <script>
    var n = 0;
    var total = 5;
    var standby = null;
    function countDown (during, duringCallback, endCallback, timer) {
      during = +during;
      if (during > 0) {
        duringCallback(during);
        during--;
        window[timer] = setTimeout(() => {
          countDown(during, duringCallback, endCallback, timer);
        }, 1000)
      } else {
        clearTimeout(window[timer]);
        endCallback();
      }
    }
    document.body.addEventListener('click', function () {
      standby && clearTimeout(standby);
      total = 5;
      document.querySelector('.standby').style.display = 'none';
      document.querySelector('.total span').innerText = `+${++n}`;
      countDown(5, function () {
        document.querySelector('.count-down span').innerText = total--;
      }, function () {
        document.querySelector('.count-down span').innerText = 'end';
        document.querySelector('.standby').style.display = 'block';
      }, 'standby');
    }, false);
  </script></body></html>