【Javascript Demo】防止按钮在短时间内被多次点击

简介:

如果一个按钮可以在短时间内多次点击,那么有可能会被用户恶意点击,为防止这种情况,可以设定一定时间内只能点击一次,其他时间禁止点击按钮。

1.效果如下:

 
 

2.代码如下:
 
复制代码
<div>
        <input type="button" value=" 点下我不会怀孕的 " id="btn" onclick="show()" />
    </div>
    <script type="text/javascript">
        /* 
        timeId=window.setTimeout("method()",1000);     window.clearTimeout(timeId);定时执行 
        timeId=window.setInterval("method()",1000);     window.clearInterval(timeId);循环执行 
        */

        var nn = 0;
        var tipId;
        var tipO;
        function show() {
            nn = 10;
            tipId = window.setInterval("start()", 1000); //每隔1秒调用一次start()方法
            $("#btn").removeAttr("onclick");//取消点击事件
            tipO = window.setTimeout("getclick()", 10000);//10秒后给定点击事件
        }

        function start() {
            if (nn > 0) {
                var vv = " 点下我不会怀孕的 (" + nn + ")";
                $("#btn").attr("disabled", "disabled"); //使按钮不能被点击
                $("#btn").attr("value", vv); //更改按钮上的文字
                nn--;
            } else {
                $("#btn").removeAttr("disabled"); //使按钮能够被点击
                $("#btn").attr("value", " 点下我不会怀孕的 "); //更改按钮上的文字
                window.clearInterval(tipId); //清除循环事件
            }
        }

        function getclick() {
            $("#btn").attr("onclick", "show()"); //给定点击事件
            window.clearTimeout(tipO);//取消定时事件
        }
    </script>





本文转自叶超Luka博客园博客,原文链接:http://www.cnblogs.com/yc-755909659/p/3591758.html,如需转载请自行联系原作者
目录
相关文章
|
3月前
|
Web App开发 JavaScript 前端开发
添加浮动按钮点击滚动到网页底部的纯JavaScript演示代码 IE9、11,Maxthon 1.6.7,Firefox30、31,360极速浏览器7.5.3.308下测试正常
添加浮动按钮点击滚动到网页底部的纯JavaScript演示代码 IE9、11,Maxthon 1.6.7,Firefox30、31,360极速浏览器7.5.3.308下测试正常
|
26天前
|
数据采集 存储 监控
实现自动化数据抓取:使用Node.js操控鼠标点击与位置坐标
本文介绍了如何使用Node.js和Puppeteer实现自动化数据抓取,特别是针对新闻网站“澎湃新闻”。通过设置代理IP、User-Agent和Cookie,提高爬虫的效率和隐蔽性,避免被网站封锁。代码示例展示了如何模拟鼠标点击、键盘输入等操作,抓取并整理新闻数据,适用于需要规避IP限制和突破频率限制的场景。
71 10
|
3月前
|
算法 JavaScript 前端开发
第一个算法项目 | JS实现并查集迷宫算法Demo学习
本文是关于使用JavaScript实现并查集迷宫算法的中国象棋demo的学习记录,包括项目运行方法、知识点梳理、代码赏析以及相关CSS样式表文件的介绍。
第一个算法项目 | JS实现并查集迷宫算法Demo学习
|
3月前
|
JavaScript 前端开发
JS配合CSS3实现动画和拖动小星星小Demo
本文通过代码示例展示了如何使用JavaScript和CSS3实现动画效果和拖动小星星的交互效果,包括文字掉落动画和鼠标拖动产生小星星动画的实现方法。
50 0
JS配合CSS3实现动画和拖动小星星小Demo
|
3月前
|
JavaScript 前端开发
JS判断点击是单击还是双击
如何使用JavaScript判断用户点击是单击还是双击。
42 0
|
4月前
|
前端开发 JavaScript 开发者
前端JS按钮点击事件、跳出弹窗、遮罩的实战示例
本文提供了一个前端JS按钮点击事件、弹出式窗口和遮罩层的实战示例,包括HTML、CSS和JavaScript的具体实现代码,以及功能解析,演示了如何实现按钮点击后触发弹窗显示和遮罩层,并在2秒后自动关闭或点击遮罩层关闭弹窗的效果。
前端JS按钮点击事件、跳出弹窗、遮罩的实战示例
|
4月前
|
JavaScript 前端开发
使用js生成表格标题、表格内容并且每行附带删除按钮然后插入到页面中
使用js生成表格标题、表格内容并且每行附带删除按钮然后插入到页面中
39 2
|
4月前
|
JavaScript 前端开发 Java
JavaScript内存泄露大揭秘!你的应用为何频频“爆内存”?点击解锁救星秘籍!
【8月更文挑战第23天】在Web前端开发中,JavaScript是构建动态网页的关键技术。然而,随着应用复杂度增加,内存管理变得至关重要。本文探讨了JavaScript中常见的内存泄露原因,包括意外的全局变量、不当使用的闭包、未清除的定时器、未清理的DOM元素引用及第三方库引发的内存泄露。通过了解这些问题并采取相应措施,开发者可以有效避免内存泄露,提高应用性能。
58 1
|
4月前
|
JavaScript Java
点击按钮,向下添加目录。Java script+jQuery写法
点击按钮,向下添加目录。Java script+jQuery写法
25 1
|
4月前
|
JavaScript Java
分别使用js与jquery写 单击按钮时出现内容 点击删除按钮不会再向下出现
分别使用js与jquery写 单击按钮时出现内容 点击删除按钮不会再向下出现
20 1