防止按钮在短时间内被多次点击的方法


Posted in Javascript onMarch 10, 2014

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

代码如下:

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
<title>Js定时事件</title> 
<script src="js/jquery-1.9.1.js" type="text/javascript"></script> 
</head> 
<body> 
<form id="form1" runat="server"> 
<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 = 30; 
var tipId; 
function show() { 
tipId = window.setInterval("start()", 1000); //每隔1秒调用一次start()方法 
} 
function start() { 
if (nn > 0) { 
var vv = "点下我(" + nn + ")"; 
$("#btn").attr("disabled", "disabled"); //使按钮不能被点击 
$("#btn").attr("value", vv); //更改按钮上的文字 
nn--; 
} else { 
nn = 30; 
$("#btn").removeAttr("disabled"); //使按钮能够被点击 
$("#btn").attr("value", "点下我"); //更改按钮上的文字 
window.clearInterval(tipId); //清除循环事件 
} 
} 
</script> 
</form> 
</body> 
</html>
Javascript 相关文章推荐
ExtJS 2.0实用简明教程 之ExtJS版的Hello
Apr 29 Javascript
浅析jquery ajax异步调用方法中不能给全局变量赋值的原因及解决方法
Jan 10 Javascript
深入理解jQuery中的事件冒泡
May 24 Javascript
JavaScript探测CSS动画是否已经完成的方法
Aug 30 Javascript
Javascript之面向对象--接口
Dec 02 Javascript
原生js实现焦点轮播图效果
Jan 12 Javascript
BootStrapValidator初使用教程详解
Feb 10 Javascript
JS匹配日期和时间的正则表达式示例
May 12 Javascript
深入理解vue中的$set
Jun 01 Javascript
200行代码实现blockchain 区块链实例详解
Mar 14 Javascript
微信小程序实现的一键连接wifi功能示例
Apr 24 Javascript
解决微信小程序scroll-view组件无横向滚动的问题
Feb 04 Javascript
JS操作CSS随机改变网页背景实现思路
Mar 10 #Javascript
jquery插件开发之实现jquery手风琴功能分享
Mar 10 #Javascript
文本域光标操作的jQuery扩展分享
Mar 10 #Javascript
jquery插件开发之实现google+圈子选择功能
Mar 10 #Javascript
js实现通用的微信分享组件示例
Mar 10 #Javascript
jquery基础教程之数组使用详解
Mar 10 #Javascript
查询json的数据结构的8种方式简介
Mar 10 #Javascript
You might like
基于MySQL分区性能的详细介绍
2013/05/02 PHP
使用dump函数,给php加断点测试
2013/06/25 PHP
Laravel源码解析之路由的使用和示例详解
2018/09/27 PHP
CI(CodeIgniter)框架中URL特殊字符处理与SQL注入隐患分析
2019/02/28 PHP
不用写JS也能使用EXTJS视频演示
2008/12/29 Javascript
jquery键盘事件介绍
2011/01/31 Javascript
利用JQuery动画制作滑动菜单项效果实现步骤及代码
2013/02/07 Javascript
jQuery 隐藏和显示 input 默认值示例
2014/06/03 Javascript
Bootstrap源码解读排版(1)
2016/12/23 Javascript
微信小程序 picker 组件详解及简单实例
2017/01/10 Javascript
nodejs模块学习之connect解析
2017/07/05 NodeJs
解决vue-cli + webpack 新建项目出错的问题
2018/03/20 Javascript
element-ui 文件上传修改文件名的方法示例
2019/11/05 Javascript
JavaScript 中的执行上下文和执行栈实例讲解
2021/02/25 Javascript
python实现矩阵乘法的方法
2015/06/28 Python
教你用Python创建微信聊天机器人
2020/03/31 Python
使用python将请求的requests headers参数格式化方法
2019/01/02 Python
Django组件之cookie与session的使用方法
2019/01/10 Python
pandas dataframe的合并实现(append, merge, concat)
2019/06/24 Python
解决Django中多条件查询的问题
2019/07/18 Python
全面了解django的缓存机制及使用方法
2019/07/22 Python
基于python的docx模块处理word和WPS的docx格式文件方式
2020/02/13 Python
Python 实现将大图切片成小图,将小图组合成大图的例子
2020/03/14 Python
在keras中对单一输入图像进行预测并返回预测结果操作
2020/07/09 Python
Python自动化之UnitTest框架实战记录
2020/09/08 Python
HTML5本地存储之Web Storage详解
2016/07/04 HTML / CSS
波兰灯具、照明和LED购物网站:Lampy.pl
2019/03/11 全球购物
网络维护中文求职信
2014/01/03 职场文书
烹调加工管理制度
2014/02/04 职场文书
村委会贫困证明范本
2014/09/17 职场文书
检讨书1000字
2014/10/11 职场文书
教师个人培训总结
2015/02/11 职场文书
项目负责人岗位职责
2015/02/15 职场文书
神州牡丹园的导游词
2019/11/20 职场文书
用golang如何替换某个文件中的字符串
2021/04/25 Golang
利用nginx搭建RTMP视频点播、直播、HLS服务器
2022/05/25 Servers