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


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 相关文章推荐
30个最佳jQuery Lightbox效果插件分享
Apr 11 Javascript
JavaScript使用HTML5的window.postMessage实现跨域通信例子
Apr 11 Javascript
Underscore.js 1.3.3 中文注释翻译说明
Jun 25 Javascript
IE8 内存泄露(内存一直增长 )的原因及解决办法
Apr 06 Javascript
JavaScript实现设计模式中的单例模式的一些技巧总结
May 17 Javascript
JS正则表达式验证账号、手机号、电话和邮箱是否合法
Mar 08 Javascript
js编写简单的计时器功能
Jul 15 Javascript
JS实现table表格固定表头且表头随横向滚动而滚动
Oct 26 Javascript
vue双花括号的使用方法 附练习题
Nov 07 Javascript
细说webpack源码之compile流程-入口函数run
Dec 26 Javascript
微信小程序实现pdf、word等格式文件上传的方法
Sep 10 Javascript
解决vue-cli@3.xx安装不成功的问题及搭建ts-vue项目
Feb 09 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 download.php实现代码 跳转到下载文件(response.redirect)
2009/08/26 PHP
微博短链接算法php版本实现代码
2012/09/15 PHP
PHP不使用递归的无限级分类简单实例
2016/11/05 PHP
php实现保存周期为1天的购物车类
2017/07/07 PHP
JQuery 获取和设置Select选项的代码
2010/02/07 Javascript
背景图跟随鼠标移动的Mootools插件实现代码
2011/12/12 Javascript
Javascript实现滚动图片新闻的实例代码
2013/11/27 Javascript
js select下拉联动 更具级联性!
2020/04/17 Javascript
AngularJS 验证码60秒倒计时功能的实现
2017/06/05 Javascript
使用webpack打包koa2 框架app
2018/02/02 Javascript
解决webpack dev-server不能匹配post请求的问题
2018/08/24 Javascript
vue服务端渲染添加缓存的方法
2018/09/18 Javascript
js实现json数组分组合并操作示例
2019/02/12 Javascript
微信小程序textarea层级过高(盖住其他元素)问题的解决办法
2019/03/04 Javascript
vue+elementUI 复杂表单的验证、数据提交方案问题
2019/06/24 Javascript
vue实现在线翻译功能
2019/09/27 Javascript
Node对CommonJS的模块规范
2019/11/06 Javascript
JavaScript实现拖拽效果
2020/03/16 Javascript
JS Thunk 函数的含义和用法实例总结
2020/04/08 Javascript
Python运行的17个时新手常见错误小结
2012/08/07 Python
python网络编程实例简析
2014/09/26 Python
Python中的pygal安装和绘制直方图代码分享
2017/12/08 Python
使用Eclipse如何开发python脚本
2018/04/11 Python
python递归函数绘制分形树的方法
2018/06/22 Python
django框架防止XSS注入的方法分析
2019/06/21 Python
使用PYTHON解析Wireshark的PCAP文件方法
2019/07/23 Python
python如何保证输入键入数字的方法
2019/08/23 Python
Python3如何在Windows和Linux上打包
2020/02/25 Python
浅谈OpenCV中的新函数connectedComponentsWithStats用法
2020/07/05 Python
墨西哥皇宫度假村预订:Palace Resorts
2018/06/16 全球购物
State Cashmere官网:半零售价可持续蒙古羊绒
2020/02/26 全球购物
质检员的岗位职责
2013/11/15 职场文书
高中毕业的自我鉴定
2013/12/09 职场文书
面包店的创业计划书范文
2014/01/16 职场文书
珍珠鸟教学反思
2014/02/01 职场文书
2014院党委领导班子对照检查材料思想汇报
2014/09/24 职场文书