為超鏈接加上disabled后的故事
更新時(shí)間：2010年12月10日 14:51:35 作者：
為超鏈接加上disabled后的故事，學(xué)習(xí)js的朋友可以參考下對(duì)超鏈接的一些控制。
場(chǎng)情：
一張頁(yè)面中原來(lái)有一個(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)擊的邏輯，于是又來(lái)了下一個(gè)版本
function reciverSms(obj){
var sms = getSmsCode();
obj.disabled = true;
windows.setTimeout(function(){
obj.disabled = false;
},5000);
}
代碼邏輯很簡(jiǎn)單，獲取一次短信后，鏈接禁用5秒?？墒菦](méi)有想的事情又來(lái)了，原來(lái)超鏈接禁用了后雖然樣子變成禁用了，但是還是可以點(diǎn)擊的，原來(lái)是個(gè)陷阱，于是又來(lái)了第三個(gè)版本
function reciverSms(obj){
if(obj.disabled){
return;
}
var sms = getSmsCode();
obj.disabled = true;
windows.setTimeout(function(){
obj.disabled = false;
},5000);
}
至此這個(gè)功能因該是算做好了，可是還有一件令我想不的事，之前說(shuō)超連接disabled屬性為true時(shí)，表現(xiàn)出來(lái)的樣子是灰色不可用狀態(tài)，但這里有個(gè)特例，如果這個(gè)超鏈接被設(shè)置了
color的css屬性樣式，在非ie瀏覽器上表現(xiàn)出來(lái)的樣子就不是禁用了，終于看到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);
}
通過(guò)一步步的改進(jìn)，一個(gè)芝麻功能終于完成了。例子雖小，但卻給了我很多思考。
一張頁(yè)面中原來(lái)有一個(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)擊的邏輯，于是又來(lái)了下一個(gè)版本
復(fù)制代碼 代碼如下:
function reciverSms(obj){
var sms = getSmsCode();
obj.disabled = true;
windows.setTimeout(function(){
obj.disabled = false;
},5000);
}
代碼邏輯很簡(jiǎn)單，獲取一次短信后，鏈接禁用5秒?？墒菦](méi)有想的事情又來(lái)了，原來(lái)超鏈接禁用了后雖然樣子變成禁用了，但是還是可以點(diǎn)擊的，原來(lái)是個(gè)陷阱，于是又來(lái)了第三個(gè)版本
復(fù)制代碼 代碼如下:
function reciverSms(obj){
if(obj.disabled){
return;
}
var sms = getSmsCode();
obj.disabled = true;
windows.setTimeout(function(){
obj.disabled = false;
},5000);
}
至此這個(gè)功能因該是算做好了，可是還有一件令我想不的事，之前說(shuō)超連接disabled屬性為true時(shí)，表現(xiàn)出來(lái)的樣子是灰色不可用狀態(tài)，但這里有個(gè)特例，如果這個(gè)超鏈接被設(shè)置了
color的css屬性樣式，在非ie瀏覽器上表現(xiàn)出來(lái)的樣子就不是禁用了，終于看到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);
}
通過(guò)一步步的改進(jìn)，一個(gè)芝麻功能終于完成了。例子雖小，但卻給了我很多思考。
相關(guān)文章
web開(kāi)發(fā)中不可避免會(huì)使用js，為了給頁(yè)面良好的瘦身我們一般都會(huì)將js代碼放在外部，然后通過(guò)src引用，如果web頁(yè)面與js采用的編碼不同一就會(huì)產(chǎn)生亂碼，接下來(lái)與大家分享下解決方法，感興趣的朋友可以參考下哈2013-04-04
這篇文章主要介紹了JavaScript中Pinia是否可以代替Vuex，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-07-07
echarts學(xué)習(xí)之如何給餅圖中間添加文字
這篇文章主要介紹了echarts學(xué)習(xí)之如何給餅圖中間添加文字問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-03-03
javascript閉包傳參和事件的循環(huán)綁定示例探討
按常理循環(huán)綁定事件，但是得到的結(jié)果卻不是想要的，下面有個(gè)不錯(cuò)的示例，可以為大家詳細(xì)分解下2014-04-04
這篇文章主要為大家介紹了iframe一次下載多個(gè)文件實(shí)現(xiàn)示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-01-01
實(shí)例講解javascript注冊(cè)事件處理函數(shù)
這篇文章主要以實(shí)例的方式向大家介紹了javascript注冊(cè)事件處理函數(shù)，內(nèi)容很全面，感興趣的朋友可以參考一下2016-01-01
js實(shí)現(xiàn)簡(jiǎn)單秒表走動(dòng)的時(shí)鐘特效
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)簡(jiǎn)單秒表走動(dòng)的時(shí)鐘特效，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2015-08-08
為網(wǎng)站代碼塊pre標(biāo)簽增加一個(gè)復(fù)制代碼按鈕代碼
寫(xiě)文章的時(shí)候，作為一名專業(yè)的碼農(nóng)，經(jīng)常會(huì)在文章中粘貼一些代碼。有的時(shí)候代碼塊比較長(zhǎng)，在后期使用中需要復(fù)制這段代碼就比較麻煩2021-11-11
這篇文章主要介紹了js表單登陸驗(yàn)證的方法,基于thinkPHP前端頁(yè)面實(shí)現(xiàn)javascript針對(duì)表單用戶名與密碼的驗(yàn)證功能,需要的朋友可以參考下2016-10-10
通過(guò)js實(shí)現(xiàn)分頁(yè)的代碼，一般情況下需要指定頁(yè)數(shù)，腳本之家以前也發(fā)布過(guò)一些，大家結(jié)合下即可。2010-09-09