JS如何实现限时限次数点击按钮
JS如何实现限时限次数点击按钮
发布时间：2022-03-26 13:37:12 来源：高防服务器网 阅读：90 作者：小新 栏目：开发技术
这篇文章主要为大家展示了“JS如何实现限时限次数点击按钮”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“JS如何实现限时限次数点击按钮”这篇文章吧。
限时限次数点击按钮
思路:用一个变量作为计数,点击一次，计数加一点击函数内判断计数变量设置定时恢复
实现
HTML代码
<body> <div class="a123"> <a class="btn bg1" onclick="doIt()">123123</a> <br> <div class="show"></div> </div> </body>
CSS代码
.btn{ display: inline-block; width: 80px; height: 40px; line-height: 40px; border-radius: 5px; cursor: pointer; } .bg1{ background-color: rgb(21, 93, 248); color: white; .bg2{ background-color: rgb(53, 53, 53); .a123{ width: 500px; height: 300px; border: 1px solid pink; margin: 200px auto; padding: 30px; text-align: center;
JS代码
<script> //计数变量 var count = 0; //3秒钟重置一次计数 并恢复按钮 var resetC = window.setInterval(function(){ //恢复计数 恢复点击事件 count = 0; $('.btn').attr('onclick','doIt()'); //恢复背景颜色 $('.btn').addClass('bg1'); $('.btn').removeClass('bg2'); },1000*10); //点击事件 function doIt(){ //点一次 计数加一 count += 1; //判断计数 大于2 就 if(count >= 2){ //移除 点击函数 $('.btn').removeAttr('onclick'); //更换背景CSS $('.btn').addClass('bg2'); $('.btn').removeClass('bg1'); } //将计数显示出来 $('.show').text(count); } </script>
TIPS
定时函数
定时一次setTimeout(),单次使用
var timeOut = window.setTimeout(function(){ //里面放定时任务 },1000); //1000 是指时间，即1000ms
循环定时setInterval()，需要使用clearInterval()来清除定时任务
var resetC = window.setInterval(function(){ //里面放定时任务 },1000); /* 1000 是指时间，即1000ms 这个定时任务，每隔1s就会触发一次。 如果要清除，使用clearInterval()函数 */ window.clearInterval(resetC);
禁止选中文字
使用<a>标签作为点击元素， 当点击事件频繁时 ，文字会被选中，不好看
CSS代码实现
body{ -moz-user-select: none; /*火狐*/ -webkit-user-select: none; /*webkit浏览器*/ -ms-user-select: none; /*IE10*/ -khtml-user-select: none; /*早期浏览器*/ user-select: none; }
以上是“JS如何实现限时限次数点击按钮”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注高防服务器网行业资讯频道！
[微信提示：高防服务器能助您降低 IT 成本，提升运维效率，使您更专注于核心业务创新。
[图文来源于网络，不代表本站立场，如有侵权，请联系高防服务器网删除]
[