防止按鈕在短時間內(nèi)被多次點擊的方法
更新時間：2014年03月10日 17:43:18 作者：
一個按鈕可以在短時間內(nèi)多次點擊，那么有可能會被用戶惡意點擊，下面有個不錯的方法可以有效制止，希望對大家有所幫助
如果一個按鈕可以在短時間內(nèi)多次點擊，那么有可能會被用戶惡意點擊，為防止這種情況，可以設(shè)定一定時間內(nèi)只能點擊一次，其他時間禁止點擊按鈕。
代碼如下：
<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);定時執(zhí)行
timeId=window.setInterval("method()",1000); window.clearInterval(timeId);循環(huán)執(zhí)行
*/
var nn = 30;
var tipId;
function show() {
tipId = window.setInterval("start()", 1000); //每隔1秒調(diào)用一次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); //清除循環(huán)事件
}
}
</script>
</form>
</body>
</html>
代碼如下：
復(fù)制代碼 代碼如下:
<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);定時執(zhí)行
timeId=window.setInterval("method()",1000); window.clearInterval(timeId);循環(huán)執(zhí)行
*/
var nn = 30;
var tipId;
function show() {
tipId = window.setInterval("start()", 1000); //每隔1秒調(diào)用一次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); //清除循環(huán)事件
}
}
</script>
</form>
</body>
</html>
相關(guān)文章
本文章通過實例代碼給大家詳細介紹js中正則表達式的全局匹配模式 /g的用法，需要的朋友參考下2017-04-04
微信小程序中使用自定義字體的實現(xiàn)與體驗優(yōu)化
由于微信支持的字體非常有限,不能滿足個性化的需求,因此在開發(fā)的過程中可能會需要使用自定義字體,下面這篇文章主要給大家介紹了關(guān)于微信小程序中使用自定義字體的實現(xiàn)與體驗優(yōu)化的相關(guān)資料,需要的朋友可以參考下2022-02-02
js 將canvas生成圖片保存,或直接保存一張圖片的實現(xiàn)方法
下面小編就為大家分享一篇js 將canvas生成圖片保存,或直接保存一張圖片的實現(xiàn)方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-01-01
獲取select元素被選中的文本內(nèi)容的方法有很多，本文為大家介紹下使用javascript來輕松實現(xiàn)下2014-01-01
所見即所得的富文本編輯器bootstrap-wysiwyg使用方法詳解
這篇文章主要為大家分享一款所見即所得的富文本編輯器bootstrap-wysiwyg，并詳細告訴大家文本編輯器bootstrap-wysiwyg的使用方法，感興趣的小伙伴們可以參考一下2016-05-05
js對話框的模擬演示代碼2008-06-06
JavaScript函數(shù)聲明和函數(shù)表達式的區(qū)別
這篇文章主要介紹了JavaScript函數(shù)聲明和函數(shù)表達式的區(qū)別，文章圍繞主題展開詳細的內(nèi)容介紹，具有一定的參考價值，需要的小伙伴可以參考一下2022-06-06
JS運動相關(guān)知識點小結(jié)(附彈性運動示例)
這篇文章主要介紹了JS運動相關(guān)知識點,總結(jié)分析了JavaScript運動所涉及的相關(guān)知識點與注意事項,并附帶了一個JavaScript彈性運動的實例供大家參考,需要的朋友可以參考下2016-01-01
js計算精度問題小結(jié)，需要的朋友可以參考一下2013-04-04
這篇文章主要為大家詳細介紹了微信小程序?qū)崿F(xiàn)音樂播放器，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-11-11