限时限次数点击按钮

更新日期: 2022-03-25阅读: 940标签: 定时器

思路:

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


实现

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

定时函数

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

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

这篇文章将带你深入理解js中定时器是如何工作的,setTimeout和setInterval的原理是什么?

为什么尽量别用setInterval

在开发一个在线聊天工具时,经常会有过多少毫秒就重复执行一次某操作的需求。“没问题”,大家都说,“用setInterval好了。”我觉得这个点子很糟糕。

你可能不知道的setInterval的坑

之前印象中一直记得setInterval有一些坑,但是一直不是很清楚那些坑是什么。setInterval会无视代码的错误、setInterval会无视任何情况下定时执行、、setInterval不能确保每次调用都能执行

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

setInterval()和setTimeout()方法都是js原生的定时方法,当然它们两个的作用也是不同的,并且最近在做上下滚动公告栏的时候,发现了setInterval()非常令人抓狂的问题,那就是用setInterval()做的定时滚动会随着浏览器页面切换变得无法控制!为什么会说无法控制呢

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

setTimeout()函数:用来指定某个函数或某段代码在多少毫秒之后执行。它返回一个整数,表示定时器timer的编号,可以用来取消该定时器。JavasScript引擎是基于事件驱动和单线程执行的,JS引擎一直等待着任务队列中任务的到来

node-schedule 全局内关闭定时器

用Cron表达式完成定时器,全局内关闭定时器需要获取到定时器的引用,scheduleJob存在第四个参数,然而readme中没有提及,可知API

js 随机点名

主要是利用定时器,点击开始IDE时候不断的执行,并同时生成随机数,利用数组的下标完成展示。主要用到的知识点:setInterval,Math.random()

js定时器setTiemout、setInterval

JS提供了一些原生方法来实现延时去执行某一段代码,下面来简单介绍一下setTiemout、setInterval、setImmediate、requestAnimationFrame。JS提供了一些原生方法来实现延时去执行某一段代码,下面来简单介绍一下。

Js定时器越走越快的问题

之前在项目中写了定时器来做循环播放,但是总是会有越走越快的问题,开始是以为前后的HTML代码拼接的有问题,时间紧急的情况下反复改了很多也没什么效果,后来发现是js定时器的问题,在这里记录一下。

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

JS提供了一些原生方法来实现延时去执行某一段代码,下面来简单介绍一下setTiemout、setInterval、setImmediate、requestAnimationFrame。setTimeout: 设置一个定时器,在定时器到期后执行一次函数或代码段

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!