这篇文章主要介绍了JS 限时限次数点击按钮,实现方法很简单需要用一个变量作为计数,点击一次,计数加一点击函数内判断计数变量设置定时恢复,对实例代码感兴趣的朋友一起看看吧
限时限次数点击按钮
思路:用一个变量作为计数,点击一次,计数加一点击函数内判断计数变量设置定时恢复
实现
HTML代码
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 点击按钮内容请搜索0133技术站以前的文章或继续浏览下面的相关文章希望大家以后多多支持0133技术站!
以上就是JS 限时限次数点击按钮的实现思路的详细内容,更多请关注0133技术站其它相关文章!