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


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中通过URL传递汉字的方法
Apr 09 Javascript
40款非常有用的 jQuery 插件推荐(系列一)
Dec 21 Javascript
让javascript加载速度倍增的方法(解决JS加载速度慢的问题)
Dec 12 Javascript
jQuery实现的右下角广告窗体跟随效果示例
Sep 16 Javascript
javascript实现根据汉字获取简拼
Sep 25 Javascript
JavaScript给每一个li节点绑定点击事件的实现方法
Dec 01 Javascript
Vue 2.0 服务端渲染入门介绍
Mar 29 Javascript
VUE中使用Vue-resource完成交互
Jul 21 Javascript
解析Angular 2+ 样式绑定方式
Jan 15 Javascript
Bootstrap 模态框自定义点击和关闭事件详解
Aug 10 Javascript
分享一个vue项目“脚手架”项目的实现步骤
May 26 Javascript
通过高德地图API获得某条道路上的所有坐标用于描绘道路的方法
Aug 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编程最快明白》第四讲:日期、表单接收、session、cookie
2010/11/01 PHP
php 利用socket发送HTTP请求(GET,POST)
2015/08/24 PHP
php metaphone()函数的定义和用法
2016/05/15 PHP
值得分享的php+ajax实时聊天室
2016/07/20 PHP
CentOS7编译安装php7.1的教程详解
2019/04/18 PHP
javascript iframe内的函数调用实现方法
2009/07/19 Javascript
jquery tablesorter.js 支持中文表格排序改进
2009/12/09 Javascript
jquery一句话全选/取消全选
2011/03/01 Javascript
javascript游戏开发之《三国志曹操传》零部件开发(二)人物行走的实现
2013/01/23 Javascript
我的Node.js学习之路(一)
2014/07/06 Javascript
深入分析JQuery和JavaScript的异同
2014/10/23 Javascript
jQuery简单实现网页选项卡特效
2014/11/24 Javascript
JS+CSS实现鼠标经过弹出一个DIV框完整实例(带缓冲动画渐变效果)
2016/03/25 Javascript
Angular.js与Bootstrap相结合实现手风琴菜单代码
2016/04/13 Javascript
Bootstrap富文本组件wysiwyg数据保存到mysql的方法
2016/05/09 Javascript
Javascript中的对象和原型(二)
2016/08/12 Javascript
webpack常用配置项配置文件介绍
2016/11/07 Javascript
JavaScript正则表达式和级联效果
2017/09/14 Javascript
vue将时间戳转换成自定义时间格式的方法
2018/03/02 Javascript
AngularJS日期格式化常见操作实例分析
2018/05/17 Javascript
vue指令只能输入正数并且只能输入一个小数点的方法
2018/06/08 Javascript
Bootstrap标签页(Tab)插件切换echarts不显示问题的解决
2018/07/13 Javascript
基于 vue-skeleton-webpack-plugin 的骨架屏实战
2019/08/05 Javascript
微信小程序 wxParse插件显示视频问题
2019/09/27 Javascript
[02:40]DOTA2超级联赛专访430 从小就爱玩对抗性游戏
2013/06/18 DOTA
Python使用functools实现注解同步方法
2018/02/06 Python
Python中max函数用于二维列表的实例
2018/04/03 Python
PyCharm代码整体缩进,反向缩进的方法
2018/06/25 Python
Python之Django自动实现html代码(下拉框,数据选择)
2020/03/13 Python
AmazeUI 模态窗口的实现代码
2020/08/18 HTML / CSS
印尼在线旅游门户网站:NusaTrip
2019/11/01 全球购物
2019年c语言经典面试题目
2016/08/17 面试题
放飞梦想演讲稿
2014/05/05 职场文书
解除劳动合同证明书模板
2014/11/20 职场文书
关于长城的导游词
2015/01/30 职场文书
小学生运动会广播
2015/08/19 职场文书