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-08js刪除對象/數(shù)組中null、undefined、空對象及空數(shù)組方法示例
這篇文章主要給大家介紹了關(guān)于js刪除對象/數(shù)組中null、undefined、空對象及空數(shù)組的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考借鑒,下面隨著小編一起來看看吧2018-11-11微信小程序?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微信小程序?qū)W習(xí)總結(jié)(二)樣式、屬性、模板操作分析
這篇文章主要介紹了微信小程序樣式、屬性、模板操作,結(jié)合實例形式分析了微信小程序尺寸單位、樣式、數(shù)據(jù)初始化、屬性、模板調(diào)用相關(guān)操作技巧,需要的朋友可以參考下2020-06-06javascript中SetInterval與setTimeout的定時器用法
Javascript的setTimeOut和setInterval函數(shù)應(yīng)用非常廣泛,它們都用來處理延時和定時任務(wù),比如打開網(wǎng)頁一段時間后彈出一個登錄框,頁面每隔一段時間發(fā)送異步請求獲取最新數(shù)據(jù)等,本文文章通過代碼示例給大家介紹javascript中SetInterval與setTimeout的定時器用法2015-08-08