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


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入门教程(3) js面向对象
Jan 31 Javascript
Js 正则表达式知识汇总
Dec 02 Javascript
jquery插件uploadify多图上传功能实现代码
Aug 12 Javascript
vue实现简单实时汇率计算功能
Jan 15 Javascript
Vue实现路由跳转和嵌套
Jun 20 Javascript
Vue自定义事件(详解)
Aug 19 Javascript
轻量级JS Cookie插件js-cookie的使用方法
Mar 22 Javascript
解决angular2 获取到的数据无法实时更新的问题
Aug 31 Javascript
vue微信分享的实现(在当前页面分享其他页面)
Apr 16 Javascript
JavaScript深入V8引擎以及编写优化代码的5个技巧
Jun 24 Javascript
JavaScript函数Call、Apply原理实例解析
Feb 17 Javascript
搭建vscode+vue环境的详细教程
Aug 31 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数组函数
2008/08/18 PHP
用Zend Encode编写开发PHP程序
2010/02/21 PHP
优化PHP程序的方法小结
2012/02/23 PHP
基于php 随机数的深入理解
2013/06/05 PHP
ThinkPHP3.1新特性之内容解析输出详解
2014/06/19 PHP
PHP实现二维数组去重功能示例
2017/01/12 PHP
PHP实现的redis主从数据库状态检测功能示例
2017/07/20 PHP
利用 fsockopen() 函数开放端口扫描器的实例
2017/08/19 PHP
php统计数组不同元素的个数的实例方法
2019/09/26 PHP
js修改原型的属性使用介绍
2014/01/26 Javascript
Nodejs实现的一个静态服务器实例
2014/12/06 NodeJs
使用ngView配合AngularJS应用实现动画效果的方法
2015/06/19 Javascript
javascript多物体运动实现方法分析
2016/01/08 Javascript
辨析JavaScript中的Undefined类型与null类型
2016/05/26 Javascript
jQuery EasyUI基础教程之EasyUI常用组件(推荐)
2016/07/15 Javascript
jQuery基于正则表达式的表单验证功能示例
2017/01/21 Javascript
js时间查询插件使用详解
2017/04/07 Javascript
javaScript中封装的各种写法示例(推荐)
2017/07/03 Javascript
JS实现分页浏览横向图片(类轮播)实例代码
2017/11/06 Javascript
快速了解vue-cli 3.0 新特性
2018/02/28 Javascript
JavaScript数组基于交换的排序示例【冒泡排序】
2018/07/21 Javascript
JS把字符串格式的时间转换成几秒前、几分钟前、几小时前、几天前等格式
2019/07/10 Javascript
解决VUE双向绑定失效的问题
2019/10/29 Javascript
python requests 库请求带有文件参数的接口实例
2019/01/03 Python
深入浅析python3中的unicode和bytes问题
2019/07/03 Python
python搜索包的路径的实现方法
2019/07/19 Python
pytorch 中pad函数toch.nn.functional.pad()的用法
2020/01/08 Python
matplotlib自定义鼠标光标坐标格式的实现
2021/01/08 Python
心理健康教育心得体会
2013/12/29 职场文书
中学校庆方案
2014/03/17 职场文书
乔迁之喜主持词
2014/03/27 职场文书
土木工程求职信
2014/05/29 职场文书
物流管理专业推荐信
2014/09/06 职场文书
维稳承诺书
2015/01/20 职场文书
2015年转正工作总结范文
2015/04/02 职场文书
mysql拆分字符串作为查询条件的示例代码
2022/07/07 MySQL