JS如何实现限时限次数点击按钮

这篇文章主要为大家展示了"JS如何实现限时限次数点击按钮"，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下"JS如何实现限时限次数点击按钮"这篇文章吧。

限时限次数点击按钮

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

实现

HTML代码

    123123    
    

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代码

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);

禁止选中文字

使用标签作为点击元素， 当点击事件频繁时 ，文字会被选中，不好看

CSS代码实现

body{    -moz-user-select: none; /*火狐*/    -webkit-user-select: none; /*webkit浏览器*/    -ms-user-select: none; /*IE10*/    -khtml-user-select: none; /*早期浏览器*/    user-select: none;}

以上是"JS如何实现限时限次数点击按钮"这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注行业资讯频道！