限时限次数点击按钮

思路:

用一个变量作为计数,点击一次，计数加一
点击函数内判断计数变量
设置定时恢复

实现

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);
    color: white;
}
.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

定时函数

1.定时一次setTimeout(),单次使用

var timeOut = window.setTimeout(function(){
    //里面放定时任务
},1000);
//1000 是指时间，即1000ms

2.循环定时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;
}

来自：https://www.cnblogs.com/jokrhell/archive/2022/03/25/16053482.html

本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！

链接: https://shenqiku.cn/article/FLY_11295