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


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 1.4 15个你应该知道的新特性(译)
Jan 24 Javascript
jQueryPad 实用的jQuery测试工具(支持IE,chrome,FF)
May 22 Javascript
浅谈js中子页面父页面方法 变量相互调用
Aug 04 Javascript
Bootstrap3多级下拉菜单
Feb 24 Javascript
AngularJS ui-router (嵌套路由)实例
Mar 10 Javascript
Angular2学习教程之TemplateRef和ViewContainerRef详解
May 25 Javascript
微信小程序定位当前城市的方法
Jul 19 Javascript
layui树形菜单动态遍历的例子
Sep 23 Javascript
JS JQuery获取data-*属性值方法解析
Sep 01 jQuery
手把手教你实现 Promise的使用方法
Sep 02 Javascript
vue登录页实现使用cookie记住7天密码功能的方法
Feb 18 Vue.js
Vue中避免滥用this去读取data中数据
Mar 02 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数组操作
2011/12/30 PHP
php实现上传图片生成缩略图示例
2014/04/13 PHP
腾讯CMEM的PHP扩展编译安装方法
2015/09/25 PHP
WordPress后台中实现图片上传功能的实例讲解
2016/01/11 PHP
一页面多XMLHttpRequest对象
2007/01/22 Javascript
js判断FCKeditor内容是否为空的两种形式
2013/05/14 Javascript
javascript判断office版本示例
2014/04/11 Javascript
浅谈JavaScript 框架分类
2014/11/10 Javascript
《JavaScript DOM 编程艺术》读书笔记之JavaScript 语法
2015/01/09 Javascript
javascript实现网页中涉及的简易运动(改变宽高、透明度、位置)
2015/11/29 Javascript
js 截取或者替换字符串中的数字实现方法
2016/06/13 Javascript
全面理解JavaScript中的继承(必看)
2016/06/16 Javascript
JavaScript中的对象和原型(一)
2016/08/12 Javascript
JQuery统计input和textarea文字输入数量(代码分享)
2016/12/29 Javascript
Javascript实现页面滚动时导航智能定位
2017/05/06 Javascript
vue实现在表格里,取每行的id的方法
2018/03/09 Javascript
Vue 指令实现按钮级别权限管理功能
2019/04/23 Javascript
详解js中let与var声明变量的区别
2020/04/05 Javascript
Vue 2.0 中依赖注入 provide/inject组合实战
2019/06/20 Javascript
react使用antd表单赋值,用于修改弹框的操作
2020/10/29 Javascript
JS中锚点链接点击平滑滚动并自由调整到顶部位置
2021/02/06 Javascript
复制粘贴功能的Python程序
2008/04/04 Python
Python优化技巧之利用ctypes提高执行速度
2016/09/11 Python
使用numpy和PIL进行简单的图像处理方法
2018/07/02 Python
Python使用matplotlib实现基础绘图功能示例
2018/07/03 Python
css3过渡_动力节点Java学院整理
2017/07/11 HTML / CSS
将HTML5 Canvas的内容保存为图片借助toDataURL实现
2013/05/20 HTML / CSS
使用javascript和HTML5 Canvas画的四渐变色播放按钮效果
2014/04/10 HTML / CSS
Kipling凯浦林美国官网:世界著名时尚休闲包袋品牌
2016/08/24 全球购物
旅游管理实习自我鉴定
2013/09/29 职场文书
领导班子四风查摆对照检查材料思想汇报
2014/10/05 职场文书
村党的群众路线教育实践活动工作总结
2014/10/25 职场文书
出差报告范文
2014/11/06 职场文书
二婚主持词
2015/06/30 职场文书
Golang 实现WebSockets
2022/04/24 Golang
MySQL存储过程及语法详解
2022/08/05 MySQL