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


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 相关文章推荐
ppk谈JavaScript style属性
Oct 10 Javascript
关于viewport,Ext.panel和Ext.form.panel的关系
May 07 Javascript
深入探寻javascript定时器
Jan 02 Javascript
原生js实现对Ajax的封装(仿jquery)
Jan 22 Javascript
Vue自定义指令拖拽功能示例
Feb 17 Javascript
jquery插件canvaspercent.js实现百分比圆饼效果
Jul 18 jQuery
Vue组件通信之Bus的具体使用
Dec 28 Javascript
快速解决vue-cli不能初始化webpack模板的问题
Mar 20 Javascript
在Mac下彻底卸载node和npm的方法
May 16 Javascript
vue点击input弹出带搜索键盘并监听该元素的方法
Aug 25 Javascript
JS防抖和节流实例解析
Sep 24 Javascript
vue使用localStorage持久性存储实现评论列表
Apr 14 Vue.js
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获取MAC地址的具体实例
2013/12/13 PHP
thinkPHP分页功能实例详解
2017/05/05 PHP
PHP简单获取随机数的常用方法小结
2017/06/07 PHP
详解php反序列化
2020/06/10 PHP
用 javascript 实现的点击复制代码
2007/03/24 Javascript
让textarea控件的滚动条怎是位与最下方
2007/04/20 Javascript
轻松创建nodejs服务器(10):处理上传图片
2014/12/18 NodeJs
原生js页面滚动延迟加载图片
2015/12/20 Javascript
BootStrap中的table实现数据填充与分页应用小结
2016/05/26 Javascript
bootstrap与Jquery UI 按钮样式冲突的解决办法
2016/09/23 Javascript
KnockoutJS 3.X API 第四章之数据控制流with绑定
2016/10/10 Javascript
详解js中==与===的区别
2017/01/08 Javascript
详解vue 单页应用(spa)前端路由实现原理
2018/04/04 Javascript
JS实现字符串去重及数组去重的方法示例
2018/04/21 Javascript
vue计算属性computed的使用方法示例
2019/03/13 Javascript
JavaScript鼠标悬停事件用法解析
2020/05/15 Javascript
解决antd 表单设置默认值initialValue后验证失效的问题
2020/11/02 Javascript
JavaScript 防盗链的原理以及破解方法
2020/12/29 Javascript
vue实现树状表格效果
2020/12/29 Vue.js
[02:16]2018年度CS GO最具人气选手-完美盛典
2018/12/16 DOTA
python读写二进制文件的方法
2015/05/09 Python
Python的Django框架中的数据库配置指南
2015/07/17 Python
基于MTCNN/TensorFlow实现人脸检测
2018/05/24 Python
Python Django 页面上展示固定的页码数实现代码
2019/08/21 Python
CSS3的 fit-content实现水平居中
2017/09/07 HTML / CSS
CSS3 实现的火焰动画
2020/12/07 HTML / CSS
微软俄罗斯官方网站:Microsoft俄罗斯
2016/09/18 全球购物
碧欧泉Biotherm加拿大官方网站:法国高端护肤品牌
2019/10/18 全球购物
企业道德讲堂实施方案
2014/03/19 职场文书
2014镇副书记群众路线专题民主生活会思想汇报
2014/09/23 职场文书
导师对论文的学术评语
2015/01/04 职场文书
投资合作意向书范本
2015/05/08 职场文书
监护人证明
2015/06/19 职场文书
2016暑期社会实践心得体会范文
2016/01/14 职场文书
导游词之吉林吉塔
2019/11/11 职场文书
浅谈redis缓存在项目中的使用
2021/05/20 Redis