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


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 Ajax的Get方式时需要注意URL地方
Apr 07 Javascript
javascrpt绑定事件之匿名函数无法解除绑定问题
Dec 06 Javascript
jquery控制display属性为none或block
Mar 31 Javascript
node.js中的url.format方法使用说明
Dec 10 Javascript
jQuery使用before()和after()在元素前后添加内容的方法
Mar 26 Javascript
第一次接触JS require.js模块化工具
Apr 17 Javascript
BootStrap使用file-input插件上传图片的方法
Sep 05 Javascript
jQuery插件FusionCharts绘制的2D条状图效果【附demo源码】
May 13 jQuery
Angular2环境搭建具体操作步骤(推荐)
Aug 04 Javascript
在Vue组件中获取全局的点击事件方法
Sep 06 Javascript
记一次用ts+vuecli4重构项目的实现
May 21 Javascript
Vue + iView实现Excel上传功能的完整代码
Jun 22 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
PHP中for与foreach的区别分析
2011/03/09 PHP
php 归并排序 数组交集
2011/05/10 PHP
php利用事务处理转账问题
2015/04/22 PHP
php mysql like 实现多关键词搜索的方法
2016/10/29 PHP
jquery的$(document).ready()和onload的加载顺序
2010/05/26 Javascript
ExtJs GridPanel简单的增删改实现代码
2010/08/26 Javascript
window.name代替cookie的实现代码
2010/11/28 Javascript
jQuery 源码分析笔记(5) jQuery.support
2011/06/19 Javascript
『JavaScript』限制Input只能输入数字实现思路及代码
2013/04/22 Javascript
jquery 设置元素相对于另一个元素的top值(实例代码)
2013/11/06 Javascript
兼容主流浏览器的JS复制内容到剪贴板
2014/12/12 Javascript
初识Javascript小结
2015/07/16 Javascript
JS 实现可停顿的垂直滚动实例代码
2016/11/23 Javascript
深入理解选择框脚本[推荐]
2016/12/13 Javascript
Canvas放置反弹效果随机图形(实例)
2017/08/17 Javascript
Vuex实现购物车小功能
2020/08/17 Javascript
[31:01]2014 DOTA2国际邀请赛中国区预选赛5.21 CNB VS Orenda
2014/05/23 DOTA
Python ORM框架SQLAlchemy学习笔记之安装和简单查询实例
2014/06/10 Python
Python实现抓取网页并且解析的实例
2014/09/20 Python
python入门教程之识别验证码
2017/03/04 Python
Mac中Python 3环境下安装scrapy的方法教程
2017/10/26 Python
python将处理好的图像保存到指定目录下的方法
2019/01/10 Python
Keras在训练期间可视化训练误差和测试误差实例
2020/06/16 Python
利用Python实现学生信息管理系统的完整实例
2020/12/30 Python
HTML5 Canvas绘制圆点虚线实例
2015/01/01 HTML / CSS
Nordgreen英国官网:斯堪的纳维亚设计师手表
2018/10/24 全球购物
国贸类专业毕业生的求职信分享
2013/12/08 职场文书
项目管理计划书
2014/01/09 职场文书
初中升旗仪式演讲稿
2014/05/08 职场文书
党的群众路线教育实践活动总结材料
2014/10/30 职场文书
2015年五一劳动节活动总结
2015/02/09 职场文书
李强感恩观后感
2015/06/17 职场文书
学会掌握自己命运的十条黄金法则:
2019/08/08 职场文书
Django实现WebSocket在线聊天室功能(channels库)
2021/09/25 Python
SSM VUE Axios详解
2021/10/05 Vue.js
Redis中key的过期删除策略和内存淘汰机制
2022/04/12 Redis