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


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实现图片轮播效果代码
Sep 03 Javascript
js 弹出框 替代浏览器的弹出框
Oct 29 Javascript
extjs3 combobox取value和text案例详解
Feb 06 Javascript
通过一段代码简单说js中的this的使用
Jul 23 Javascript
JavaScript中window.showModalDialog()用法详解
Dec 18 Javascript
js实现鼠标悬浮给图片加边框的方法
Jan 30 Javascript
JavaScript操作Oracle数据库示例
Mar 06 Javascript
jQuery实现对象转为url参数的方法
Jan 11 Javascript
javascript图片预览和上传(兼容IE)
Mar 15 Javascript
vue实现微信获取用户信息的方法
Mar 21 Javascript
scrapyd schedule.json setting 传入多个值问题
Aug 07 Javascript
解决vue scoped html样式无效的问题
Oct 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
锁定年轻人的双倍活力 星巴克推出星倍醇即饮浓咖啡
2021/03/03 咖啡文化
隐藏X-Space个人空间下方版权方法隐藏X-Space个人空间标题隐藏X-Space个人空间管理版权方法
2007/02/22 PHP
php生成缩略图示例代码分享(使用gd库实现)
2014/01/20 PHP
PHP中exec函数和shell_exec函数的区别
2014/08/20 PHP
分享微信扫码支付开发遇到问题及解决方案-附Ecshop微信支付插件
2015/08/23 PHP
Symfony2使用第三方库Upload制作图片上传实例详解
2016/02/04 PHP
PHP计算数组中值的和与乘积的方法(array_sum与array_product函数)
2016/04/01 PHP
Javascript的IE和Firefox兼容性汇编
2006/07/01 Javascript
js同时按下两个方向键
2007/12/01 Javascript
一些常用的JS功能函数代码
2009/06/23 Javascript
javascript 操作Word和Excel的实现代码
2009/10/26 Javascript
jQuery学习笔记之控制页面实现代码
2012/02/27 Javascript
jquery ajax同步异步的执行最终解决方案
2013/04/26 Javascript
JavaScript 创建运动框架的实现代码
2013/05/08 Javascript
Javascript验证上传图片大小[前台处理]
2014/07/18 Javascript
Jquery遍历Json数据的方法
2015/04/20 Javascript
jQuery获取radio选中项的值实例
2016/06/18 Javascript
详谈javascript精度问题与调整
2017/07/08 Javascript
通过V8源码看一个关于JS数组排序的诡异问题
2017/08/14 Javascript
为什么我们要做三份 Webpack 配置文件
2017/09/18 Javascript
layui: layer.open加载窗体时出现遮罩层的解决方法
2019/09/26 Javascript
使用Vue+Django+Ant Design做一个留言评论模块的示例代码
2020/06/01 Javascript
JQuery使用数组遍历跳出each循环
2020/09/01 jQuery
Django内容增加富文本功能的实例
2017/10/17 Python
Python学习笔记之For循环用法详解
2019/08/14 Python
Python常见反爬虫机制解决方案
2020/06/01 Python
Opencv图像处理:如何判断图片里某个颜色值占的比例
2020/06/03 Python
python Matplotlib数据可视化(2):详解三大容器对象与常用设置
2020/09/30 Python
Vision Direct比利时:在线订购隐形眼镜
2019/08/27 全球购物
八一慰问活动方案
2014/02/07 职场文书
股权收购意向书
2014/04/01 职场文书
会计学自荐信
2014/06/03 职场文书
小学竞选班长演讲稿
2014/09/09 职场文书
教师批评与自我批评剖析材料
2014/10/16 职场文书
2014年人事专员工作总结
2014/11/19 职场文书
python实现一个简单的贪吃蛇游戏附代码
2022/06/28 Python