為超鏈接加上disabled后的故事
更新時(shí)間：2010年12月10日 14:51:35 作者：
為超鏈接加上disabled后的故事，學(xué)習(xí)js的朋友可以參考下對(duì)超鏈接的一些控制。
場(chǎng)情：
一張頁(yè)面中原來有一個(gè)超鏈接按鈕，點(diǎn)擊后可以獲取到短信認(rèn)證碼。如
<a href="javascript:reciverSms()">獲取短信認(rèn)證碼</a>
<script type="text/javascript">
function reciverSms(){
var sms = getSmsCode();
}
</script>
但是考慮到頻繁點(diǎn)擊獲取認(rèn)證碼，對(duì)相關(guān)設(shè)備的壓力，就做了一個(gè)點(diǎn)擊5秒后才允許再點(diǎn)擊的邏輯，于是又來了下一個(gè)版本
function reciverSms(obj){
var sms = getSmsCode();
obj.disabled = true;
windows.setTimeout(function(){
obj.disabled = false;
},5000);
}
代碼邏輯很簡(jiǎn)單，獲取一次短信后，鏈接禁用5秒。可是沒有想的事情又來了，原來超鏈接禁用了后雖然樣子變成禁用了，但是還是可以點(diǎn)擊的，原來是個(gè)陷阱，于是又來了第三個(gè)版本
function reciverSms(obj){
if(obj.disabled){
return;
}
var sms = getSmsCode();
obj.disabled = true;
windows.setTimeout(function(){
obj.disabled = false;
},5000);
}
至此這個(gè)功能因該是算做好了，可是還有一件令我想不的事，之前說超連接disabled屬性為true時(shí)，表現(xiàn)出來的樣子是灰色不可用狀態(tài)，但這里有個(gè)特例，如果這個(gè)超鏈接被設(shè)置了
color的css屬性樣式，在非ie瀏覽器上表現(xiàn)出來的樣子就不是禁用了，終于看到ie的好了。于是第四個(gè)版本出現(xiàn)了。
function reciverSms(obj){
if(obj.disabled){
return;
}
var sms = getSmsCode();
obj.disabled = true;
addClass(obj,"gray");
windows.setTimeout(function(){
obj.disabled = false;
removeClass(obj,"gray");
},5000);
}
通過一步步的改進(jìn)，一個(gè)芝麻功能終于完成了。例子雖小，但卻給了我很多思考。
一張頁(yè)面中原來有一個(gè)超鏈接按鈕，點(diǎn)擊后可以獲取到短信認(rèn)證碼。如
復(fù)制代碼 代碼如下:
<a href="javascript:reciverSms()">獲取短信認(rèn)證碼</a>
<script type="text/javascript">
function reciverSms(){
var sms = getSmsCode();
}
</script>
但是考慮到頻繁點(diǎn)擊獲取認(rèn)證碼，對(duì)相關(guān)設(shè)備的壓力，就做了一個(gè)點(diǎn)擊5秒后才允許再點(diǎn)擊的邏輯，于是又來了下一個(gè)版本
復(fù)制代碼 代碼如下:
function reciverSms(obj){
var sms = getSmsCode();
obj.disabled = true;
windows.setTimeout(function(){
obj.disabled = false;
},5000);
}
代碼邏輯很簡(jiǎn)單，獲取一次短信后，鏈接禁用5秒。可是沒有想的事情又來了，原來超鏈接禁用了后雖然樣子變成禁用了，但是還是可以點(diǎn)擊的，原來是個(gè)陷阱，于是又來了第三個(gè)版本
復(fù)制代碼 代碼如下:
function reciverSms(obj){
if(obj.disabled){
return;
}
var sms = getSmsCode();
obj.disabled = true;
windows.setTimeout(function(){
obj.disabled = false;
},5000);
}
至此這個(gè)功能因該是算做好了，可是還有一件令我想不的事，之前說超連接disabled屬性為true時(shí)，表現(xiàn)出來的樣子是灰色不可用狀態(tài)，但這里有個(gè)特例，如果這個(gè)超鏈接被設(shè)置了
color的css屬性樣式，在非ie瀏覽器上表現(xiàn)出來的樣子就不是禁用了，終于看到ie的好了。于是第四個(gè)版本出現(xiàn)了。
復(fù)制代碼 代碼如下:
function reciverSms(obj){
if(obj.disabled){
return;
}
var sms = getSmsCode();
obj.disabled = true;
addClass(obj,"gray");
windows.setTimeout(function(){
obj.disabled = false;
removeClass(obj,"gray");
},5000);
}
通過一步步的改進(jìn)，一個(gè)芝麻功能終于完成了。例子雖小，但卻給了我很多思考。
相關(guān)文章
Javascript的并行運(yùn)算實(shí)現(xiàn)代碼
隨著多核cpu的普級(jí),并發(fā)/并行多線程運(yùn)算在主流的編程語(yǔ)言越來越流行,而在目前Javascript實(shí)現(xiàn)中還看不到在語(yǔ)言方面支持多線程,現(xiàn)在Javascript如此流行,真希望今后會(huì)在語(yǔ)言的層面有很大的變化.2010-11-11
原生JS實(shí)現(xiàn)鼠標(biāo)滑動(dòng)撒愛心特效
這篇文章主要為大家詳細(xì)介紹了原生JS實(shí)現(xiàn)鼠標(biāo)滑動(dòng)撒愛心特效，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-10-10
下面小編就為大家?guī)硪黄獪\談js中的in-for循環(huán)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-06-06
純前端JavaScript實(shí)現(xiàn)Excel IO案例分享
這篇文章主要為大家詳細(xì)介紹了純前端JavaScript實(shí)現(xiàn)Excel IO案例，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-08-08
JavaScript中判斷數(shù)據(jù)類型的實(shí)用方法總結(jié)
最近項(xiàng)目中有不少地方需要判斷數(shù)據(jù)類型,但是判斷數(shù)據(jù)類型也有好幾種方法,并且每種方法判斷的數(shù)據(jù)類型也有局限性,所以本文就來為大家總結(jié)一下js中判斷數(shù)據(jù)類型的幾種實(shí)用方法吧2025-01-01
JavaScript中async await更優(yōu)雅的錯(cuò)誤處理方式
async/await中的異常處理很讓人混亂,盡管有很多種方式來應(yīng)對(duì)async 函數(shù)的異常,但是連經(jīng)驗(yàn)豐富的開發(fā)者有時(shí)候也會(huì)搞錯(cuò),所以這篇文章主要給大家介紹了關(guān)于JavaScript中async await更優(yōu)雅的錯(cuò)誤處理方式的相關(guān)資料,需要的朋友可以參考下2021-09-09
pjblog中的UBBCode.js...2007-04-04
js中自定義方法實(shí)現(xiàn)停留幾秒sleep
js中不存在自帶的sleep方法，要想休眠要自己定義個(gè)方法,需要的朋友可以參考下2014-07-07
JavaScript前端開發(fā)之實(shí)現(xiàn)二進(jìn)制讀寫操作
這篇文章主要介紹了JavaScript前端開發(fā)之實(shí)現(xiàn)二進(jìn)制讀寫操作的相關(guān)資料,需要的朋友可以參考下2015-11-11
動(dòng)態(tài)加載js文件 document.createElement
動(dòng)態(tài)加載js文件 document.createElement...2006-10-10