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