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


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 相关文章推荐
JQuery CSS样式控制 学习笔记
Jul 23 Javascript
jquery单行文字向上滚动效果的实现代码
Sep 05 Javascript
Jquery弹出层插件ThickBox的使用方法
Dec 09 Javascript
JS+CSS实现仿触屏手机拨号盘界面及功能模拟完整实例
May 16 Javascript
jQuery中attr()与prop()函数用法实例详解(附用法区别)
Dec 29 Javascript
JavaScript位移运算符(无符号) &gt;&gt;&gt; 三个大于号 的使用方法详解
Mar 31 Javascript
jQuery中text() val()和html()的区别实例详解
Jun 28 Javascript
JS动态计算移动端rem的解决方案
Oct 14 Javascript
原生和jQuery的ajax用法详解
Jan 23 Javascript
Bootstrap 设置datetimepicker在屏幕上面弹出设置方法
Mar 21 Javascript
Node.js中的require.resolve方法使用简介
Apr 23 Javascript
关于JavaScript中的this指向问题总结篇
Jul 23 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
PHP 基于Yii框架中使用smarty模板的方法详解
2013/06/13 PHP
PHP获取当前页面URL函数实例
2014/10/22 PHP
PHP实现原生态图片上传封装类方法
2016/11/08 PHP
thinkphp jquery实现图片上传和预览效果
2020/07/22 PHP
PHP实现搜索时记住状态的方法示例
2018/05/11 PHP
Yii2框架中一些折磨人的坑
2019/12/15 PHP
Thinkphp框架使用list_to_tree 实现无限级分类列出所有节点示例
2020/04/04 PHP
javascript编程起步(第七课)
2007/01/10 Javascript
运用Windows XP附带的Msicuu.exe、Msizap.exe来彻底卸载顽固程序
2007/04/21 Javascript
jquery创建div 实现代码
2009/04/27 Javascript
JS中的form.submit()不能提交表单的错误原因
2014/10/08 Javascript
javascript基于DOM实现权限选择实例分析
2015/05/14 Javascript
分享经典的JavaScript开发技巧
2015/11/21 Javascript
BootStrap table表格插件自适应固定表头(超好用)
2016/08/24 Javascript
利用Query+bootstrap和js两种方式实现日期选择器
2017/01/10 Javascript
Vue动态实现评分效果
2017/05/24 Javascript
Angular.js中下拉框实现渲染html的方法
2017/06/18 Javascript
iframe高度自适应及隐藏滚动条的实例详解
2017/09/29 Javascript
微信小程序的mpvue框架快速上手指南
2019/05/15 Javascript
js制作提示框插件
2020/12/24 Javascript
[36:41]完美世界DOTA2联赛循环赛FTD vs Magma第一场 10月30日
2020/10/31 DOTA
Python线程指南详细介绍
2017/01/05 Python
python实现的二叉树定义与遍历算法实例
2017/06/30 Python
python实现植物大战僵尸游戏实例代码
2019/06/10 Python
Python日志器使用方法及原理解析
2020/09/27 Python
CSS3 Flexbox中flex-shrink属性的用法示例介绍
2013/12/30 HTML / CSS
美国瑜伽品牌:Gaiam
2017/10/31 全球购物
个人自我鉴定写法
2013/11/30 职场文书
上班离岗检讨书
2014/01/27 职场文书
大学毕业自我评价
2014/02/02 职场文书
违反工作纪律检讨书
2014/02/15 职场文书
高中学生评语大全
2014/04/25 职场文书
学生会竞选演讲稿学习部
2014/08/25 职场文书
房产授权委托书范本
2014/09/22 职场文书
2016师德师风学习心得体会
2016/01/12 职场文书
世界各国短波电台对东亚播送时间频率表(SW)
2021/06/28 无线电