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

前端技术 2023/09/04 JavaScript
如果一个按钮可以在短时间内多次点击，那么有可能会被用户恶意点击，为防止这种情况，可以设定一定时间内只能点击一次，其他时间禁止点击按钮。

代码如下：
复制代码 代码如下:

<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>

本文地址：https://www.stayed.cn/item/9172

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案