- A+
所属分类：Web前端
限时限次数点击按钮
思路:
- 用一个变量作为计数,点击一次，计数加一
- 点击函数内判断计数变量
- 设置定时恢复
实现
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); 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; } 
