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


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 相关文章推荐
当前页禁止复制粘贴截屏代码小集
Jul 24 Javascript
9行javascript代码获取QQ群成员具体实现
Oct 16 Javascript
使用js画图之圆、弧、扇形
Jan 12 Javascript
javascript日期格式化方法小结
Dec 17 Javascript
Bootstrap按钮功能之查询按钮和重置按钮
Oct 26 Javascript
详解React 16 中的异常处理
Jul 28 Javascript
vuejs父子组件之间数据交互详解
Aug 09 Javascript
vue实现div拖拽互换位置
Jul 29 Javascript
关于React动态加载路由处理的相关问题
Jan 07 Javascript
layui禁用侧边导航栏点击事件的解决方法
Sep 25 Javascript
基于JavaScript实现留言板功能
Mar 16 Javascript
使用eslint和githooks统一前端风格的技巧
Jul 29 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
全国FM电台频率大全 - 4 山西省
2020/03/11 无线电
php获取系统变量方法小结
2015/05/29 PHP
php实现转换ubb代码的方法
2015/06/18 PHP
php 类中的常量、静态属性、非静态属性的区别
2017/04/09 PHP
不间断滚动JS打包类,基本可以实现所有的滚动效果,太强了
2007/12/08 Javascript
Mootools 1.2教程 函数
2009/09/15 Javascript
jquery无缝向上滚动实现代码
2013/03/29 Javascript
JS方法调用括号的问题探讨
2014/01/24 Javascript
js实现可得到不同颜色值的颜色选择器实例
2015/02/28 Javascript
js HTML5 Ajax实现文件上传进度条功能
2016/02/13 Javascript
AngularJS基础 ng-copy 指令实例代码
2016/08/01 Javascript
webpack+vue.js实现组件化详解
2016/10/12 Javascript
Javascript基于jQuery UI实现选中区域拖拽效果
2016/11/25 Javascript
jQuery基于正则表达式的表单验证功能示例
2017/01/21 Javascript
Vue 2.0的数据依赖实现原理代码简析
2017/07/10 Javascript
实例详解JavaScript中setTimeout函数的执行顺序
2017/07/12 Javascript
使用 vue.js 构建大型单页应用
2018/02/10 Javascript
vue实现条件判断动态绑定样式的方法
2018/09/29 Javascript
vue input实现点击按钮文字增删功能示例
2019/01/29 Javascript
vue + any-touch实现一个iscroll 实现拖拽和滑动动画效果
2019/04/08 Javascript
javascript随机变色实例代码
2019/10/15 Javascript
基于JavaScript实现留言板功能
2020/03/16 Javascript
jQuery 动画与停止动画效果实例详解
2020/05/19 jQuery
[01:36:57]【09DOTA2第一视角】小骷髅
2014/04/16 DOTA
python中(str,list,tuple)基础知识汇总
2018/02/20 Python
浅谈python中统计计数的几种方法和Counter详解
2019/11/07 Python
用sleep间隔进行python反爬虫的实例讲解
2020/11/30 Python
Python3.9.1中使用match方法详解
2021/02/08 Python
CSS3转换功能transform主要属性值分析及实现分享
2012/05/06 HTML / CSS
Kappa英国官方在线商店:服装和运动器材
2020/11/22 全球购物
力学专业毕业生自荐信
2013/11/17 职场文书
初一学生期末评语
2014/04/24 职场文书
8和9的加减法教学反思
2014/05/01 职场文书
2014年光棍节活动策划方案(创意集锦)
2014/09/29 职场文书
2016学校元旦晚会经典开场白台词
2015/12/03 职场文书
基于Python和openCV实现图像的全景拼接详细步骤
2021/10/05 Python