JS 限时限次数点击按钮

小程序：扫一扫查出行
【扫一扫了解最新限行尾号】
复制小程序

限时限次数点击按钮

思路:

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

实现

HTML代码

<body>
<div class="a123">
    <a class="btn bg1" onclick="doIt()"></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

定时函数

定时一次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;
}