防止按钮在短时间内被多次点击的方法
更新时间：2014年03月10日 17:43:18 作者：
一个按钮可以在短时间内多次点击，那么有可能会被用户恶意点击，下面有个不错的方法可以有效制止，希望对大家有所帮助
如果一个按钮可以在短时间内多次点击，那么有可能会被用户恶意点击，为防止这种情况，可以设定一定时间内只能点击一次，其他时间禁止点击按钮。
代码如下：
<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>
代码如下：
复制代码 代码如下:
<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>
相关文章
本文章通过实例代码给大家详细介绍js中正则表达式的全局匹配模式 /g的用法，需要的朋友参考下2017-04-04
由于微信支持的字体非常有限,不能满足个性化的需求,因此在开发的过程中可能会需要使用自定义字体,下面这篇文章主要给大家介绍了关于微信小程序中使用自定义字体的实现与体验优化的相关资料,需要的朋友可以参考下2022-02-02
js 将canvas生成图片保存,或直接保存一张图片的实现方法
下面小编就为大家分享一篇js 将canvas生成图片保存,或直接保存一张图片的实现方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-01-01
获取select元素被选中的文本内容的方法有很多，本文为大家介绍下使用javascript来轻松实现下2014-01-01
所见即所得的富文本编辑器bootstrap-wysiwyg使用方法详解
这篇文章主要为大家分享一款所见即所得的富文本编辑器bootstrap-wysiwyg，并详细告诉大家文本编辑器bootstrap-wysiwyg的使用方法，感兴趣的小伙伴们可以参考一下2016-05-05
js对话框的模拟演示代码2008-06-06
这篇文章主要介绍了JavaScript函数声明和函数表达式的区别，文章围绕主题展开详细的内容介绍，具有一定的参考价值，需要的小伙伴可以参考一下2022-06-06
这篇文章主要介绍了JS运动相关知识点,总结分析了JavaScript运动所涉及的相关知识点与注意事项,并附带了一个JavaScript弹性运动的实例供大家参考,需要的朋友可以参考下2016-01-01
js计算精度问题小结，需要的朋友可以参考一下2013-04-04
这篇文章主要为大家详细介绍了微信小程序实现音乐播放器，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-11-11
最新评论