JavaScript 如何统计一段时间内鼠标点击次数

Posted 2023-05-07

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JavaScript 如何统计一段时间内鼠标点击次数相关的知识，希望对你有一定的参考价值。

设计这么一个程序：如果在5秒钟之内用户用鼠标点击按钮的次数超过10次，则弹出提示，如果点击速度慢则可以无限制点击次数。主要是不给用户“猛点击”，提供个算法思路也行。

以下是我写的一个，你可以试试：

<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>RunJS</title>
</head>
<body>
<input value="秒杀" type="button" id="btnTest"/>
<script type="text/javascript">
var btnTest=document.getElementById("btnTest");
var timerId,temp,timerNum;
if(!!btnTest)

temp=0,timerNum=0;
btnTest.onclick=function(e)

temp++;
if(!timerId)

timerId=setInterval(function()timerNum++;btnTest.value=timerNum+"秒内点击"+temp+"次";,1000);
setTimeout(function()if(temp<10)reset();,6000);

else if(temp>9 && timerNum<=5)

btnTest.disabled=true;
reset();
alert("您点击的太猛了，会吧电脑累坏的，休息3秒吧！");
setTimeout(function()btnTest.disabled=false;,3000);
return false;

else if(temp<9 && timerNum==5)

reset();

var reset=function()
clearInterval(timerId);
timerId=null;
temp=0;
timerNum=0;
btnTest.value="秒杀";

</script>
</body>
</html> 参考技术A 你可以在document上注册onclick事件，这样页面上所有的click都会捕获。

判断次数你可以建立一个数组，javascript数组有像堆栈一样的方法，pop和shift，你可以以每秒为一个槽位，判断当前点击时刻和上一次点击时刻的时间精确到秒数是否一样，如果一样就在当前槽位上加1，否则就shift一个新的槽位进去，每次判断的时候把所有槽位的数加起来看是否超过10. 参考技术B var md=0,dt=0;
document.onmousedown=function()
if(new Date().getTime()-dt<5*1000 && md>=10)
alert("不要连续点击!");
dt=new Date().getTime();
md=0;
else
md++;

dt=new Date().getTime();
参考技术C var md=0,dt=0;<br>document.onmousedown=function()<br> if(new Date().getTime()-dt<5*1000 && md>=10)<br> alert("不要连续点击!");<br> dt=new Date().getTime();<br> md=0;<br> else<br> md++;<br> <br> dt=new Date().getTime();<br>