这篇文章主要为大家展示了“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进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
