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

2019-10-16 21:16:11  阅读 1148 次 评论 1 条

需求

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

实现方法

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

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

  1. 倒数时间:秒

  2. 计时期间需要做的事情

  3. 计时结束需要做的事情

  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>



微信扫码查看本文
本文地址:https://www.yangguangdream.com/?id=2049
版权声明:本文为原创文章,版权归 编辑君 所有,欢迎分享本文,转载请保留出处!

发表评论


表情

评论列表

  1. 环氧地坪施工
    环氧地坪施工  @回复

    哇,赞一个