JavaScript记录鼠标最后一次点击页面
分类： 解决问题 0 7
需求
最近做了一个项目，需要在网页中实现类似系统的待机动画那种效果，每隔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 条评论关于 “JavaScript记录鼠标最后一次点击页面”