最近、私はJSをよく勉強し、偽の電子メールログインプロンプトボックスのケースを通してオブジェクト指向の理解を深めています！何も言わないでください、最初に写真を撮りましょう：
機能：一貫したコンテンツ、キーボードイベント、マウスイベントを表示するための定期的なマッチングを実現する
簡単なレイアウト：
<div id = "login"> <h2> imitation weibo login </h2> <div> <入力タイプ= "placeholder = 'placeholder =' placeholder/携帯電話番号 'autocomplete =' off 'class =' name 'id =' nameinput 'maxlength = '18'> </div> <入力= 'Plashhold =' Plasshe </div> <ul id = 'prossion'> <li>電子メールタイプを選択してください：</li> <li email = ""> </li> <li email = "@sina.com">@sina.com </li> <li email = "@163.com"> email = "@sina.cn">@sina.cn </li> <li email = "@139.com">@139.com </li> </ul> </div>
CSSコード：
ボディ、ウル、li、h2 {マージン：0;パディング：0; color：#ccc;} ul {list-style-type：none;}＃login {width：250px; background：#fff; border：1px solid #ccc; text-align：center; margin：10px auto;}＃login h2 {background：＃fa7d3c; color：#fff; line-height：40px; } detail {}。詳細入力{幅：220px;高さ：高さ：30px;マージン：10px auto; border：1px solid #ccc; padding-left：5px;}＃spound {width：225px; height：auto; background：#ffff; border：1px solid; position; posit; displute; posit; li {width：225px; height：25px; text-align：left; cursor：pointer;}＃shown li.note {color：＃989090;}JSコード：
window.onload = function（）{var s1 = new prossive（）; s1.init（）;}; function prossisk（）{this.oinput = document.getElementById（ 'nameInput'）; this.oul = document.getElementById（ 'suggint'）; this.ali = this.oul.getElementsByTagname（ 'li'）;} spression.prototype = {init：function（）{this.tochange（）; this.toblur（）; }、tochange：function（）{// ie：onpropertychange // standard：oninput /*最短ieブラウザーを判断する方法：var isie =！ - [1、]* /var ie =！ - [1、]; //このポインティングを保存してください、このポインティング問題var this = this; if（ie）{this.oinput.onpropertychange = function（）{if（this.oinput.value == ''）{this.tips（）; // null値が返されている場合にliに新しいコンテンツを追加する状況を解く; } this.showul（）; this.tips（）; this.sel（1）; //最初の項目を選択}; } else {this.oinput.oninput = function（）{this.showul（）; this.tips（）; this.sel（1）; //最初の項目を選択}}}、showul：function（）{this.oul.style.display = 'block'; }、toblur：function（）{var this = this; this.oinput.onblur = function（）{this.oul.style.display = 'none'; }}、tips：function（）{var value = this.oinput.value; //通常の試合var re = new regexp（ '@'+value.substring（value.indexof（ '@'）+1）+''）; // console.log（re）; //バグ修正：すべての内容が一度にクリアされ、それでも（var i = 1; i <this.ali.length; i ++）{this.ali [i] .style.display = 'block'; } if（re.test（value））{//（var i = 1; i <this.ali.length; i ++）{var oemail = this.ali [i] .getattribute（ 'email'）; if（i == 1）{this.ali [i] .innerhtml = value; } else {if（re.test（oemail））{//一致が表示されます。 } else {this.ali [i] .style.display = 'none'; }}}} else {// @が入力される前（var i = 1; i <this.ali.length; i ++）{var oemail = this.ali [i] .getattribute（ 'email'）; if（！oemail）{this.ali [i] .innerhtml = value; } else {this.ali [i] .innerhtml = value+oemail; }}}}}}、sel：function（inow）{//現在のインデックスvar this = this;を一時停止します。 //リセットタイプを変更するたびに、（var i = 1; i <this.ali.length; i ++）{this.ali [i] .classname = 'item'; } if（this.oinput.value == ''）{this.ali [inow] .classname = 'item'; } else {this.ali [inow] .classname = 'Active'; } for（var i = 1; i <this.ali.length; i ++）{this.ali [i] .index = i; this.ali [i] .onmouseover = function（）{for（var i = 1; i <this.ali.length; i ++）{this.ali [i] .classname = 'item'; } this.className = 'Active'; inow = this.index; // current index}; //マウスクリックイベント：this.ali [i] .onmousedown = function（）{this.oinput.value = this.innerhtml; }} //キーボードイベント：this.oinput.onkeydown = function（e）{var e = e || window.event; if（e.keycode == 38）{// on if（inow == 1）{inow = this.ali.length-1; } else {inow--; } for（var i = 1; i <this.ali.length; i ++）{this.ali [i] .classname = 'item'; } this.ali [inow] .classname = 'Active'; } else if（e.keycode == 40）{// if（inow == this.ali.length-1）{inow = 1; } else {inow ++; } for（var i = 1; i <this.ali.length; i ++）{this.ali [i] .classname = 'item'; } this.ali [inow] .classname = 'Active'; } else if（e.keycode == 13）{// this.oinput.value = this.ali [inow] .innerhtml; this.oinput.blur（）; // ul層を入力して非表示にした後、ぼかしイベントをトリガー}}}}複数のブランチと小さな詳細に対処する必要があります。また、これはしばしばオブジェクト指向の問題で発生すると感じています。このケースを通じて、私たちはこれをよく理解しています。
上記はこの記事のすべての内容です。みんなの学習に役立つことを願っています。誰もがwulin.comをもっとサポートすることを願っています。