JS 限时限次数点击按钮的实现思路
限时限次数点击按钮
TIPS
限时限次数点击按钮 思路:用一个变量作为计数,点击一次,计数加一点击函数内判断计数变量设置定时恢复 实现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);
.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;
}
到此这篇关于JS 限时限次数点击按钮的文章就介绍到这了,更多相关JS 点击按钮内容请搜索易知道(ezd.cc)以前的文章或继续浏览下面的相关文章希望大家以后多多支持易知道(ezd.cc)!
相关内容
-
win10多任务按键怎么设置在底部详细方法
win10多任务按键怎么设置在底部详细方法,按键,任务,在使用电脑...
-
怎么设置电脑桌面|怎么设置电脑桌面壁纸
怎么设置电脑桌面|怎么设置电脑桌面壁纸,,怎么设置电脑桌面壁...
-
excel怎么用乘法函数
excel怎么用乘法函数,乘法,函数,哪个,excel乘法函数怎么用?1、...
-
联想台式机怎么恢复出厂系统
联想台式机怎么恢复出厂系统,所示,如下图,如所示:首先关闭计算...
-
固定路由器如何设置固定无线路由器设置教程
固定路由器如何设置固定无线路由器设置教程,,如今我们的智能手...
-
如何链接路由器设置TP链接无线路由器设置
如何链接路由器设置TP链接无线路由器设置,,不管是什么品牌的无...
-
icloud设置哪些该打开|icloud在设置哪里打开
icloud设置哪些该打开|icloud在设置哪里打开,,icloud设置哪些...
-
酷派手机恢复出厂设置|酷派手机恢复出厂设置后
酷派手机恢复出厂设置|酷派手机恢复出厂设置后上不了网,,酷派...
-
电脑服务全部禁用了怎么恢复|电脑服务全部被禁
电脑服务全部禁用了怎么恢复|电脑服务全部被禁用怎么办,,电脑...
-
设置证书密码是什么|证书初始密码
设置证书密码是什么|证书初始密码,,设置证书密码是什么证书密...
-
设置里程碑|设置里程碑的方法有哪些
设置里程碑|设置里程碑的方法有哪些,,1. 设置里程碑的方法有哪...
-
计算机主板BIOS设置详细-BIOS知识
计算机主板BIOS设置详细-BIOS知识,,什么是电脑BIOS,一般电脑主...
-
金蝶k3入如何设置公式|金蝶K3中计量单位该如何
金蝶k3入如何设置公式|金蝶K3中计量单位该如何设置呢?,,1.金蝶...
-
苹果电脑麦克风设置|苹果电脑允许麦克风在哪里
苹果电脑麦克风设置|苹果电脑允许麦克风在哪里设置,,1. 苹果电...
-
笔记本如何设置Fn快捷键|笔记本如何设置fn快捷
笔记本如何设置Fn快捷键|笔记本如何设置fn快捷键,,笔记本如何...