JavaScript實現(xiàn)點(diǎn)擊按鈕后變灰避免多次重復(fù)提交
更新時間：2013年07月15日 17:55:18 作者：
注冊的時候需要發(fā)送驗證激活帳號的郵件，為了避免郵件的多次重復(fù)發(fā)送，所以可以在點(diǎn)擊了發(fā)送后，設(shè)置按鈕變灰，倒計時一段時間后又可重復(fù)點(diǎn)擊，具體實現(xiàn)如下，感興趣的朋友可以參考下哈
注冊的時候需要發(fā)送驗證激活帳號的郵件，為了避免郵件的多次重復(fù)發(fā)送，所以可以在點(diǎn)擊了發(fā)送后，設(shè)置button要過一段時間才能繼續(xù)點(diǎn)擊。下面是一個簡單的例子：
<html>
<head>
<title>點(diǎn)擊獲取驗證碼按鈕后按鈕變灰，倒計時一段時間后又可重復(fù)點(diǎn)擊</title>
</head>
<body>
<input type="button" id="btn" value="免費(fèi)獲取驗證碼" />
<script type="text/javascript">
var wait=60;
function time(o) {
if (wait == 0) {
o.removeAttribute("disabled");
o.value="免費(fèi)獲取驗證碼";
wait = 60;
} else {
o.setAttribute("disabled", true);
o.value=wait+"秒后可以重新發(fā)送";
wait--;
setTimeout(function() {
time(o)
},
1000)
}
}
document.getElementById("btn").onclick=function(){time(this);}
</script>
</body>
</html>
復(fù)制代碼 代碼如下:
<html>
<head>
<title>點(diǎn)擊獲取驗證碼按鈕后按鈕變灰，倒計時一段時間后又可重復(fù)點(diǎn)擊</title>
</head>
<body>
<input type="button" id="btn" value="免費(fèi)獲取驗證碼" />
<script type="text/javascript">
var wait=60;
function time(o) {
if (wait == 0) {
o.removeAttribute("disabled");
o.value="免費(fèi)獲取驗證碼";
wait = 60;
} else {
o.setAttribute("disabled", true);
o.value=wait+"秒后可以重新發(fā)送";
wait--;
setTimeout(function() {
time(o)
},
1000)
}
}
document.getElementById("btn").onclick=function(){time(this);}
</script>
</body>
</html>
相關(guān)文章
BootstrapTable+KnockoutJS自定義T4模板快速生成增刪改查頁面
這篇文章主要介紹了BootstrapTable+KnockoutJS自定義T4模板快速生成增刪改查頁面 的相關(guān)資料,需要的朋友可以參考下2016-08-08
這篇文章主要為大家介紹了js實現(xiàn)數(shù)組扁平化，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2021-12-12
js刪除對象/數(shù)組中null、undefined、空對象及空數(shù)組方法示例
這篇文章主要給大家介紹了關(guān)于js刪除對象/數(shù)組中null、undefined、空對象及空數(shù)組的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，需要的朋友可以參考借鑒，下面隨著小編一起來看看吧2018-11-11
JavaScript中所有的任務(wù)分為同步任務(wù)與異步任務(wù)，同步任務(wù)，顧名思義就是立即執(zhí)行的任務(wù)，它一般是直接進(jìn)入到主線程中執(zhí)行,這篇文章主要介紹了JS定時器不可靠的原因及解決方案,需要的朋友可以參考下2022-01-01
微信小程序?qū)崿F(xiàn)動態(tài)設(shè)置placeholder提示文字及按鈕選中/取消狀態(tài)的方法
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)動態(tài)設(shè)置placeholder提示文字及按鈕選中/取消狀態(tài)的方法,涉及事件綁定及this.setData動態(tài)設(shè)置屬性數(shù)據(jù)的相關(guān)操作技巧,需要的朋友可以參考下2017-12-12
創(chuàng)建一個新的用戶對象，接受一個有許多屬性的對象作為參數(shù)2009-12-12
在用戶注冊時，通常需要短信驗證碼，而且為了交互效果，也需要增加倒計時。該如何實現(xiàn)獲取驗證碼倒計時功能呢？下面小編給大家分享JS實現(xiàn)用戶注冊時獲取短信驗證碼和倒計時的代碼，一起看看吧2016-10-10
javascript實現(xiàn)的制作特殊字的腳本...2007-06-06
微信小程序?qū)W習(xí)總結(jié)（二）樣式、屬性、模板操作分析
這篇文章主要介紹了微信小程序樣式、屬性、模板操作,結(jié)合實例形式分析了微信小程序尺寸單位、樣式、數(shù)據(jù)初始化、屬性、模板調(diào)用相關(guān)操作技巧,需要的朋友可以參考下2020-06-06
javascript中SetInterval與setTimeout的定時器用法
Javascript的setTimeOut和setInterval函數(shù)應(yīng)用非常廣泛，它們都用來處理延時和定時任務(wù)，比如打開網(wǎng)頁一段時間后彈出一個登錄框，頁面每隔一段時間發(fā)送異步請求獲取最新數(shù)據(jù)等，本文文章通過代碼示例給大家介紹javascript中SetInterval與setTimeout的定時器用法2015-08-08