这篇文章主要为大家展示了“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);window.clearInterval(resetC);禁止选中文字
使用<a>标签作为点击元素， 当点击事件频繁时 ，文字会被选中，不好看
CSS代码实现
body{ -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; -khtml-user-select: none; user-select: none;}以上是“JS如何实现限时限次数点击按钮”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注编程网行业资讯频道！
