ホームページ >ウェブフロントエンド >jsチュートリアル >hyperlink_javascriptスキルにdisabledを追加した後の話

hyperlink_javascriptスキルにdisabledを追加した後の話

WBOY
WBOYオリジナル
2016-05-16 18:14:14999ブラウズ

状況:
ページにハイパーリンク ボタンがあるので、クリックすると SMS 認証コードを取得できます。たとえば、

コードをコピー コードは次のとおりです。

SMS 確認コードを取得


ただし、認証コードを取得するための頻繁なクリックによる関連デバイスへの負荷を考慮して、クリック後 5 秒間はそれ以上のクリックを許可しないロジックを作成しました。次のバージョン
コードをコピーします コードは次のとおりです:

function reciverSms(obj){
var sms = getSmsCode();
obj.disabled = true;
windows.setTimeout(function(){
obj.disabled = false;
}, 5000);
}

コードのロジックは非常に単純で、テキスト メッセージを取得した後、リンクは 5 秒間無効になります。しかし、またしても予期せぬことが起こり、ハイパーリンクが無効になっているように見えても、まだクリックできることが判明したため、3 番目のバージョンが登場しました。
コードをコピーします コードは次のとおりです:

function reciverSms(obj){
if(obj.disabled){
return;
}
var sms = getSmsCode();
obj.disabled = true;
windows.setTimeout(function(){
obj.disabled = false;
} ,5000);
}

これでこの関数は完成したと考えられますが、前述したように、ハイパーコネクションの無効な属性が true の場合、外観は次のとおりです。灰色の使用不可状態ですが、このハイパーリンクが

color の CSS 属性スタイルで設定されている場合、IE 以外のブラウザでは無効に表示されません。それでいいよ。そこで4番目のバージョンが登場しました。
コードをコピーします コードは次のとおりです:

function reciverSms(obj){
if(obj .disabled){
return;
var sms = getSmsCode();
addClass(obj,"gray"); windows.setTimeout (function(){
obj.disabled = false;
removeClass(obj,"gray");
},
}


段階的に改良を重ね、ついにセサミ機能が完成しました。小さな例ですが、とても考えさせられました。
声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。