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


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 17 Javascript
js css样式操作代码(批量操作)
Oct 09 Javascript
JS如何判断移动端访问设备并解析对应CSS
Nov 27 Javascript
javascript模拟地球旋转效果代码实例
Dec 02 Javascript
JavaScript给url网址进行encode编码的方法
Mar 18 Javascript
vue2.0开发实践总结之疑难篇
Dec 07 Javascript
vue插件vue-resource的使用笔记(小结)
Aug 04 Javascript
ES6中Class类的静态方法实例小结
Oct 28 Javascript
vue项目打包后打开页面空白解决办法
Jun 29 Javascript
vue Treeselect下拉树只能选择第N级元素实现代码
Aug 31 Javascript
详解JavaScript的this指向和绑定
Sep 08 Javascript
vue实现input输入模糊查询的三种方式
Aug 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
Thinkphp和Bootstrap结合打造个性的分页样式(推荐)
2016/08/01 PHP
CodeIgniter框架验证码类库文件与用法示例
2017/03/18 PHP
golang实现php里的serialize()和unserialize()序列和反序列方法详解
2018/10/30 PHP
javascript得到当前页的来路即前一页地址的方法
2014/02/18 Javascript
JS获取地址栏参数的几种方法小结
2014/02/28 Javascript
jquery分页插件jquery.pagination.js使用方法解析
2016/04/01 Javascript
JS区分浏览器页面是刷新还是关闭
2016/04/17 Javascript
javascript 数组去重复(在线去重工具)
2016/12/17 Javascript
js 索引下标之li集合绑定点击事件
2018/01/12 Javascript
Vue页面骨架屏注入方法
2018/05/13 Javascript
详解create-react-app 自定义 eslint 配置
2018/06/07 Javascript
使用70行Python代码实现一个递归下降解析器的教程
2015/04/17 Python
Python爬虫实现网页信息抓取功能示例【URL与正则模块】
2017/05/18 Python
Python实现希尔排序算法的原理与用法实例分析
2017/11/23 Python
python正则实现提取电话功能
2018/02/24 Python
深入理解Python爬虫代理池服务
2018/02/28 Python
Python设置matplotlib.plot的坐标轴刻度间隔以及刻度范围
2019/06/25 Python
Python Django 命名空间模式的实现
2019/08/09 Python
python 如何在测试中使用 Mock
2021/03/01 Python
CSS3实现线性渐变用法示例代码详解
2020/08/07 HTML / CSS
领先的钻石和订婚戒指零售商:Diamonds-USA
2016/12/11 全球购物
Oral-B荷兰:牙医最推荐的品牌
2020/02/25 全球购物
NHL官方在线商店:Shop.NHL.com
2020/05/01 全球购物
.NET常见笔试题集
2012/12/01 面试题
C#笔试题集合
2013/06/21 面试题
学生党支部先进事迹
2014/02/04 职场文书
机关工会开展学习雷锋活动总结
2014/03/01 职场文书
2014年教师业务学习材料
2014/05/12 职场文书
体育系毕业生自荐信
2014/06/28 职场文书
网吧消防安全责任书
2014/07/29 职场文书
就业意向书
2014/07/29 职场文书
物理课外活动总结
2014/08/27 职场文书
公务员四风问题对照检查材料整改措施
2014/09/26 职场文书
2016优秀护士求职自荐信
2016/01/28 职场文书
2016年校园社会综合治理宣传月活动总结
2016/03/16 职场文书
详解vue身份认证管理和租户管理
2021/05/25 Vue.js