快捷導(dǎo)航

JavaScript實(shí)現(xiàn)點(diǎn)擊按鈕后變灰避免多次重復(fù)提交

更新時(shí)間：2013年07月15日 17:55:18 作者：

注冊(cè)的時(shí)候需要發(fā)送驗(yàn)證激活帳號(hào)的郵件，為了避免郵件的多次重復(fù)發(fā)送，所以可以在點(diǎn)擊了發(fā)送后，設(shè)置按鈕變灰，倒計(jì)時(shí)一段時(shí)間后又可重復(fù)點(diǎn)擊，具體實(shí)現(xiàn)如下，感興趣的朋友可以參考下哈

注冊(cè)的時(shí)候需要發(fā)送驗(yàn)證激活帳號(hào)的郵件，為了避免郵件的多次重復(fù)發(fā)送，所以可以在點(diǎn)擊了發(fā)送后，設(shè)置button要過一段時(shí)間才能繼續(xù)點(diǎn)擊。下面是一個(gè)簡(jiǎn)單的例子：

復(fù)制代碼代碼如下:

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