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

轩陌

分类: 前端相关 821 1

需求

最近做了一个项目,需要在网页中实现类似系统的待机动画那种效果,每隔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>

在线展示

  • 7人 Love
  • 2人 Haha
  • 1人 Wow
  • 1人 Sad
  • 2人 Angry
javascript倒计时、javascript待机动画

作者简介:轩陌

打赏

生命的意义在于折腾。

共 1 条评论关于 “JavaScript记录鼠标最后一次点击页面”

Loading...