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


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 相关文章推荐
JavaScript浏览器选项卡效果
Aug 25 Javascript
js绑定事件this指向发生改变的问题解决方法
Apr 23 Javascript
javascript实现焦点滚动图效果 具体方法
Jun 24 Javascript
js setTimeout()函数介绍及应用以倒计时为例
Dec 12 Javascript
一个简单的jQuery插件ajaxfileupload.js实现ajax上传文件例子
Jun 26 Javascript
BOM系列第三篇之定时器应用(时钟、倒计时、秒表和闹钟)
Aug 17 Javascript
Javascript 实现简单计算器实例代码
Oct 23 Javascript
JS滚动到指定位置导航栏固定顶部
Jul 03 Javascript
详解webpack性能优化——DLL
Oct 20 Javascript
vue.js响应式原理解析与实现
Jun 22 Javascript
Vue 框架之键盘事件、健值修饰符、双向数据绑定
Nov 14 Javascript
node.JS路径解析之PATH模块使用方法详解
Feb 06 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
用IE远程创建Mysql数据库的简易程序
2006/10/09 PHP
paypal即时到账php实现代码
2010/11/28 PHP
PHP从二维数组得到N层分类树的实现代码
2016/10/11 PHP
PDO::commit讲解
2019/01/27 PHP
prototype 源码中文说明之 prototype.js
2006/09/22 Javascript
javascript 常用方法总结
2009/06/03 Javascript
javascript实现的使用方向键控制光标在table单元格中切换
2010/11/17 Javascript
js中小数转换整数的方法
2014/01/26 Javascript
AngularJS入门教程(一):静态模板
2014/12/06 Javascript
node.js中的path.resolve方法使用说明
2014/12/08 Javascript
jQuery源码分析之Callbacks详解
2015/03/13 Javascript
Javascript变量的作用域和作用域链详解
2015/04/02 Javascript
jQuery横向擦除焦点图特效代码分享
2015/09/06 Javascript
AngularJS 过滤与排序详解及实例代码
2016/09/14 Javascript
JS双击变input框批量修改内容
2016/12/12 Javascript
JQuery实现图片轮播效果
2017/05/08 jQuery
Vue实现内部组件轮播切换效果的示例代码
2018/04/07 Javascript
解决Vue中mounted钩子函数获取节点高度出错问题
2018/05/18 Javascript
JavaScript冒泡算法原理与实现方法深入理解
2020/06/04 Javascript
Python使用QQ邮箱发送Email的方法实例
2017/02/09 Python
Python学习小技巧之利用字典的默认行为
2017/05/20 Python
Python程序员面试题 你必须提前准备!
2018/01/16 Python
Python自定义线程类简单示例
2018/03/23 Python
TensorFlow数据输入的方法示例
2018/06/19 Python
更新修改后的Python模块方法
2019/03/03 Python
Python命令行参数解析工具 docopt 安装和应用过程详解
2019/09/26 Python
Python抓包并解析json爬虫的完整实例代码
2020/11/03 Python
Python中使用Selenium环境安装的方法步骤
2021/02/22 Python
Holland & Barrett爱尔兰:英国领先的健康零售商
2019/03/31 全球购物
金融专业大学生自我评价
2014/01/09 职场文书
孝敬父母的活动方案
2014/08/28 职场文书
公司授权委托书范本
2014/09/18 职场文书
出国签证在职证明
2014/09/20 职场文书
小学一年级学生评语大全
2014/12/25 职场文书
送达通知书
2015/04/25 职场文书
煤矿安全学习心得体会
2016/01/18 职场文书