JavaScript實現(xiàn)點擊按鈕后變灰避免多次重復(fù)提交
更新時間：2013年07月15日 17:55:18 作者：
注冊的時候需要發(fā)送驗證激活帳號的郵件，為了避免郵件的多次重復(fù)發(fā)送，所以可以在點擊了發(fā)送后，設(shè)置按鈕變灰，倒計時一段時間后又可重復(fù)點擊，具體實現(xiàn)如下，感興趣的朋友可以參考下哈
注冊的時候需要發(fā)送驗證激活帳號的郵件，為了避免郵件的多次重復(fù)發(fā)送，所以可以在點擊了發(fā)送后，設(shè)置button要過一段時間才能繼續(xù)點擊。下面是一個簡單的例子：
<html>
<head>
<title>點擊獲取驗證碼按鈕后按鈕變灰，倒計時一段時間后又可重復(fù)點擊</title>
</head>
<body>
<input type="button" id="btn" value="免費獲取驗證碼" />
<script type="text/javascript">
var wait=60;
function time(o) {
if (wait == 0) {
o.removeAttribute("disabled");
o.value="免費獲取驗證碼";
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>點擊獲取驗證碼按鈕后按鈕變灰，倒計時一段時間后又可重復(fù)點擊</title>
</head>
<body>
<input type="button" id="btn" value="免費獲取驗證碼" />
<script type="text/javascript">
var wait=60;
function time(o) {
if (wait == 0) {
o.removeAttribute("disabled");
o.value="免費獲取驗證碼";
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)文章
這篇文章主要介紹了淺談Fetch 數(shù)據(jù)交互方式,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-12-12
基于JavaScript實現(xiàn)大文件上傳后端代碼實例
這篇文章主要介紹了基于JavaScript實現(xiàn)大文件上傳后端代碼實例,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-08-08
這篇文章介紹了在javascript中自定義對象的屬性方法，有需要的朋友可以參考一下2013-07-07
下面小編就為大家?guī)硪黄狫S 60秒后重新發(fā)送驗證碼的實例講解。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-07-07
JavaScript在控件上添加倒計時功能的實現(xiàn)代碼
JavaScript在控件上添加倒計時功能，主要原理是利用控件的setEnable(true)/setEnable(false)來進(jìn)行設(shè)置控件的可用與不可用狀態(tài)，實現(xiàn)過程非常簡單，需要的的朋友參考下吧2017-07-07
在JavaScript中for循環(huán)是同步的,意味著每個循環(huán)都會等待前一個循環(huán)的請求完成后才會執(zhí)行下一個循環(huán),這篇文章主要給大家介紹了關(guān)于JS多次請求接口按順序依次執(zhí)行的解決辦法,需要的朋友可以參考下2024-04-04
這篇文章主要介紹了js 數(shù)據(jù)類型判斷的方法，幫助大家更好的理解和使用JavaScript，感興趣的朋友可以了解下2020-12-12
這篇文章主要介紹了js常用排序方法實例代碼解析,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-03-03
使用Echarts設(shè)置地圖并觸發(fā)點擊事件的代碼
這篇文章主要給大家介紹了關(guān)于使用Echarts設(shè)置地圖并觸發(fā)點擊事件的的相關(guān)資料,ECharts是一款基于JavaScript的數(shù)據(jù)可視化庫,可以用于創(chuàng)建各種類型的交互式圖表,包括地圖,需要的朋友可以參考下2023-09-09
JS庫 Highlightjs 添加代碼行號的實現(xiàn)代碼
Highlightjs是一款優(yōu)秀的代碼高亮Js組件，可以很方便地對各種語言編寫的代碼添加語法高亮樣式。本文重點給大家介紹Highlightjs 添加代碼行號的實現(xiàn)代碼，需要的朋友參考下吧2017-09-09