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


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 相关文章推荐
使用自定义setTimeout和setInterval使之可以传递参数和对象参数
Apr 24 Javascript
jquery validate.js表单验证的基本用法入门
May 13 Javascript
轻量级 JS ToolTip提示效果
Jul 20 Javascript
THREE.JS入门教程(6)创建自己的全景图实现步骤
Jan 25 Javascript
jQuery和AngularJS的区别浅析
Jan 29 Javascript
基于jQuery1.9版本如何判断浏览器版本类型
Jan 12 Javascript
js简单实现图片延迟加载的方法
Jul 19 Javascript
AngularJS 依赖注入详解及示例代码
Aug 17 Javascript
前端常见跨域解决方案(全)
Sep 19 Javascript
获取本机IP地址的实例(JavaScript / Node.js)
Nov 24 Javascript
使用vue的transition完成滑动过渡的示例代码
Jun 25 Javascript
js中script的上下放置区别,Dom的增删改创建操作实例分析
Dec 16 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清空(删除)指定目录下的文件,不删除目录文件夹的实现代码
2014/09/04 PHP
一个cssQuery对象 javascript脚本实现代码
2009/07/21 Javascript
Jquery AJAX 框架的使用方法
2009/11/03 Javascript
高效率JavaScript编写技巧整理
2013/08/23 Javascript
js中单引号与双引号冲突问题解决方法
2013/10/04 Javascript
js数组与字符串的相互转换方法
2014/07/09 Javascript
Ajax局部更新导致JS事件重复触发问题的解决方法
2014/10/14 Javascript
JavaScript中实现map功能代码分享
2015/06/11 Javascript
angularjs实现搜索的关键字在正文中高亮出来
2017/06/13 Javascript
详解如何实现Element树形控件Tree在懒加载模式下的动态更新
2019/04/25 Javascript
如何基于JavaScript判断图片是否加载完成
2019/12/28 Javascript
使用node.JS中的url模块解析URL信息
2020/02/06 Javascript
Vue 事件的$event参数=事件的值案例
2021/01/29 Vue.js
[02:55]含熏伴清风,风行者至宝、屠夫身心及典藏宝瓶二展示
2020/09/08 DOTA
Python中的文件和目录操作实现代码
2011/03/13 Python
Python 爬虫学习笔记之正则表达式
2016/09/21 Python
说说如何遍历Python列表的方法示例
2019/02/11 Python
python实现字符串加密成纯数字
2019/03/19 Python
python实现输出一个序列的所有子序列示例
2019/11/18 Python
python中seaborn包常用图形使用详解
2019/11/25 Python
Python + Requests + Unittest接口自动化测试实例分析
2019/12/12 Python
如何用Anaconda搭建虚拟环境并创建Django项目
2020/08/02 Python
CSS3中Transform动画属性用法详解
2016/07/04 HTML / CSS
纯CSS3绘制打火机动画火焰效果
2016/07/18 HTML / CSS
俄罗斯女装店:12storeez
2019/10/25 全球购物
企业车辆管理制度
2014/01/24 职场文书
七年级地理教学反思
2014/01/26 职场文书
优秀党员获奖感言
2014/02/18 职场文书
《在山的那边》教学反思
2014/02/23 职场文书
奥巴马胜选演讲稿
2014/05/15 职场文书
国际贸易专业求职信
2014/06/04 职场文书
护士实习求职信
2014/06/22 职场文书
房屋买卖定金协议书
2016/03/21 职场文书
商业计划书之服装
2019/09/09 职场文书
解决golang 关于全局变量的坑
2021/05/06 Golang
Spring中bean的生命周期之getSingleton方法
2021/06/30 Java/Android