新西兰服务器

JS如何实现限时限次数点击按钮


JS如何实现限时限次数点击按钮

发布时间:2022-03-26 13:37:12 来源:高防服务器网 阅读:90 作者:小新 栏目:开发技术

这篇文章主要为大家展示了“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如何实现限时限次数点击按钮”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注高防服务器网行业资讯频道!

[微信提示:高防服务器能助您降低 IT 成本,提升运维效率,使您更专注于核心业务创新。

[图文来源于网络,不代表本站立场,如有侵权,请联系高防服务器网删除]
[