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


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 相关文章推荐
js取滚动条的尺寸的函数代码
Nov 30 Javascript
超级好用的jQuery圆角插件 Corner速成
Aug 31 Javascript
jQuery 翻页组件yunm.pager.js实现div局部刷新的思路
Aug 11 Javascript
jQuery中JSONP的两种实现方式详解
Sep 26 Javascript
js实现上传文件添加和删除文件选择框
Oct 24 Javascript
快速解决js中window.location.href不工作的问题
Nov 02 Javascript
微信小程序 wx.request(接口调用方式)详解及实例
Nov 23 Javascript
jquery拖动改变div大小
Jul 04 jQuery
react-native 封装选择弹出框示例(试用ios&amp;android)
Jul 11 Javascript
vue组件之间的数据传递方法详解
Apr 19 Javascript
在react中使用vue的状态管理的方法示例
May 02 Javascript
微信小程序自定义弹出层效果
May 26 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
一个改进的UBB类
2006/10/09 PHP
加速XP搜索功能堪比vista
2007/03/22 PHP
php生成略缩图代码
2012/07/16 PHP
PHP获取POST数据的几种方法汇总
2015/03/03 PHP
PHP7之Mongodb API使用详解
2015/12/26 PHP
深入讲解PHP的对象注入(Object Injection)
2017/03/01 PHP
PHP大文件切割上传并带进度条功能示例
2019/07/01 PHP
JavaScript DOM 学习第七章 表单的扩展
2010/02/19 Javascript
Jquery Ajax学习实例7 Ajax所有过程事件分析示例
2010/03/23 Javascript
Exjs 入门篇
2010/04/07 Javascript
jquery ajax 局部刷新小案例
2014/02/08 Javascript
七个很有意思的PHP函数
2014/05/12 Javascript
一张表格告诉你windows.onload()与$(document).ready()的区别
2014/05/16 Javascript
JavaScript使用指针操作实现约瑟夫问题实例
2015/04/07 Javascript
JavaScript访问字符串中单个字符的两种方法
2015/07/03 Javascript
原生javascript上传图片带进度条【实例分享】
2017/04/06 Javascript
jquery中$.fn和图片滚动效果实现的必备知识总结
2017/04/21 jQuery
jQuery+ajax读取json数据并按照价格排序示例
2018/03/28 jQuery
vue文件树组件使用详解
2018/03/29 Javascript
Bootstrap的aria-label和aria-labelledby属性实例详解
2018/11/02 Javascript
新手快速入门微信小程序组件库 iView Weapp
2019/06/24 Javascript
js 根据对象数组中的属性进行排序实现代码
2019/09/12 Javascript
Vue设置长时间未操作登录自动到期返回登录页
2020/01/22 Javascript
python中的全局变量用法分析
2015/06/09 Python
Python简单计算给定某一年的某一天是星期几示例
2018/06/27 Python
11个Python Pandas小技巧让你的工作更高效(附代码实例)
2019/04/30 Python
matplotlib bar()实现多组数据并列柱状图通用简便创建方法
2021/02/24 Python
Cole Haan官方网站:美国时尚潮流品牌
2017/12/06 全球购物
自我评价200字分享
2013/12/17 职场文书
工会工作先进事迹
2014/08/18 职场文书
债务授权委托书范本
2014/10/17 职场文书
医德医风学习心得体会
2016/01/25 职场文书
《平移和旋转》教学反思
2016/02/19 职场文书
基于Redis zSet实现滑动窗口对短信进行防刷限流的问题
2022/02/12 Redis
Java9新特性之Module模块化编程示例演绎
2022/03/16 Java/Android
JavaScript实现外溢动态爱心的效果的示例代码
2022/03/21 Javascript