这篇文章主要为大家展示了“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>定时一次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如何实现限时限次数点击按钮”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注亿速云行业资讯频道！
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
