javascript技巧

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript技巧 > JS 点击按钮

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

作者:第三人设

这篇文章主要介绍了JS 限时限次数点击按钮,实现方法很简单需要用一个变量作为计数,点击一次,计数加一点击函数内判断计数变量设置定时恢复,对实例代码感兴趣的朋友一起看看吧

限时限次数点击按钮

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

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 点击按钮内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

您可能感兴趣的文章:
阅读全文