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


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对象与DOM对象之间的转换方法
Apr 15 Javascript
基于jQuery的Spin Button自定义文本框数值自增或自减
Jul 17 Javascript
深入理解Javascript中的循环优化
Nov 09 Javascript
js实现网页收藏功能
Dec 17 Javascript
Javascript技术栈中的四种依赖注入详解
Feb 23 Javascript
使用jquery获取url以及jquery获取url参数的实现方法
May 25 Javascript
JS去除空格和换行的正则表达式(推荐)
Jun 14 Javascript
vue.js树形组件之删除双击增加分支实例代码
Feb 28 Javascript
Vue响应式添加、修改数组和对象的值
Mar 20 Javascript
vue动态路由配置及路由传参的方式
May 23 Javascript
微信小程序搭建(mpvue+mpvue-weui+fly.js)的详细步骤
Sep 18 Javascript
微信小程序+云开发实现欢迎登录注册
May 24 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导入Excel到MySQL的方法
2011/04/23 PHP
php自动获取字符串编码函数mb_detect_encoding
2011/05/31 PHP
PHP URL参数获取方式的四种例子
2014/02/28 PHP
round robin权重轮循算法php实现代码
2016/05/28 PHP
PHP简单实现解析xml为数组的方法
2018/05/02 PHP
PHP 7.4中使用预加载的方法详解
2019/07/08 PHP
使用prototype.js 的时候应该特别注意的几个问题.
2007/04/12 Javascript
jQuery 1.2.x 升? 1.3.x 注意事项
2009/05/06 Javascript
JS 自定义带默认值的函数
2011/07/21 Javascript
jQuery点击弹出下拉菜单的小例子
2013/08/01 Javascript
方便实用的jQuery checkbox复选框全选功能简单实例
2013/10/09 Javascript
js中Math之random,round,ceil,floor的用法总结
2013/12/26 Javascript
jquery map方法使用示例
2014/04/23 Javascript
jQuery选择器源码解读(四):tokenize方法的Expr.preFilter
2015/03/31 Javascript
JS中使用变量保存arguments对象的方法
2016/06/03 Javascript
jQuery实现下拉菜单(内容为时间)的实时更新及图表的随动更新的方法
2016/07/07 Javascript
Ajax验证用户名或昵称是否已被注册
2017/04/05 Javascript
基于AngularJS的拖拽文件上传的实例代码
2017/07/15 Javascript
Vue.directive使用注意(小结)
2018/08/31 Javascript
JavaScript的级联函数用法简单示例【链式调用】
2019/03/26 Javascript
一篇超完整的Vue新手入门指导教程
2020/11/18 Vue.js
详解JavaScript 中的批处理和缓存
2020/11/19 Javascript
Python中的MongoDB基本操作:连接、查询实例
2015/02/13 Python
Mac中Python 3环境下安装scrapy的方法教程
2017/10/26 Python
Python实现的生成格雷码功能示例
2018/01/24 Python
使用Python实现从各个子文件夹中复制指定文件的方法
2018/10/25 Python
加拿大廉价机票预订网站:CheapOair.ca
2018/03/04 全球购物
生产现场工艺工程师岗位职责
2013/11/28 职场文书
内勤主管岗位职责
2014/04/03 职场文书
《和田的维吾尔》教学反思
2014/04/14 职场文书
班主任个人工作反思
2014/04/28 职场文书
心理学专业求职信
2014/06/16 职场文书
信息与工商管理职业规划范文:为梦想而搏击
2014/09/11 职场文书
工作收入证明模板
2014/10/10 职场文书
学习党的群众路线教育实践活动剖析材料
2014/10/13 职场文书
Python内置数据类型中的集合详解
2022/03/18 Python