搜 索

如何才能限制网站中某个按钮的点击频率与点击次数呢

编辑:QTOOL.NET日期:2019-03-0693

有时候,在一些特殊情况下,为了防止网页中的某个按钮被重复点击提交,我们需要限制按钮的点击频率,那么怎样才能实现这样的功能呢?
这里以js代码为例:
首先我们需要新建一个空白html页面,在页面中插入如下代码
    <div id="num" style='width:200px;height:100px;color: #FFFFFF;background: #785600'></div>
    <button id="aniu">测试按钮</button>
    <script type="text/javascript">
    var jishu = 0,//首先定义一个名为jishu的变量用来统计代表点击次数
num = document.getElementById('num');
    function tjcs() {
        num.innerHTML += '点击了 ' + ++jishu + '次<br>';
    }
    var th = function(cs, dekja, atvbs) {
        var time = null;
        var sycd = null;
        return function() {
            var xz = +new Date();
            if (!sycd) sycd = xz;
            if (atvbs && xz - sycd > atvbs) {
                cs();  sycd = xz;         
                clearTimeout(time);
            } else {
                clearTimeout(time);
                time = setTimeout(function() { cs();
                sycd = null;
          }, dekja);
            }
        }
    };
    document.getElementById("aniu").onclick = th(tjcs, 300,800 );
    </script>
将以上代码输入到html页面中保存好后,点击html运行即可看见效果,可以用来限制点击间隔频率,那么怎样用jq实现限制点击次数呢
<script src="jQuery.js"></script>这里首先需要引入jQuery,可以直接去网上下载,由于jq比源生js更佳方便这里就直接用jq来实现.
代码如下
 <button id="aniu">测试按钮</button>
<script type="text/javascript">
var count=0;//
$(document).ready(function(){
$("#aniu").click(function(){//点击事件
if(count==3){
$("#aniu").css("display","none");//点击超过三次隐藏按钮
alert("已达此次访问最点击次数");
};
count=count+1;
//计数+1
});
});
</script>
 
同理,将代码保存好后,双击建立的html文件点击按钮后即可看见点击效果,如果点击按钮次数超出3次,则会自动自动弹出提示框,且隐藏按钮,需要刷新重置页面才可以重新显示出来.

TAG标签:js
此文章由QTOOL.NET编辑
最新文章

热门标签