限时限次数点击按钮

更新日期: 2022-03-25 阅读: 1.3k 标签: 定时器分享

思路:

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

实现

<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://fly63.com/article/detial/11295

限时限次数点击按钮

思路:

实现

TIPS

定时函数

禁止选中文字

js中setTimeout和setInterval的深入理解：它们之间的区别，原理，“异步“等

为什么尽量别用setInterval

你可能不知道的setInterval的坑

setInterval和setTimeout的区别以及setInterval越来越快问题的解决方法

如何通过setTimeout理解JS运行机制详解

node-schedule 全局内关闭定时器

js 随机点名

js定时器setTiemout、setInterval

Js定时器越走越快的问题

JS 定时器的4种写法及介绍