JS 限时限次数点击按钮的实现思路

目录

• 限时限次数点击按钮
• TIPS

限时限次数点击按钮

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

实现

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 限时限次数点击按钮的文章就介绍到这了,更多相关JS 点击按钮内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！