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