최근에 나는 JS를 잘 연구하고 가짜 이메일 로그인 프롬프트 상자의 경우를 통해 객체 지향에 대한 이해를 심화 시켰습니다! 아무 말도하지 말고 먼저 사진을 찍자 :
기능 : 일관된 컨텐츠, 키보드 이벤트 및 마우스 이벤트를 표시하도록 정기적 인 일치 실현
간단한 레이아웃 :
<div id = "login"> <h2> 모방 weibo login </h2> <div> <입력 유형 = "text"placeholder = 'email/멤버 계정/회원 계정/회원 계정/회원 계정/멤버 계정/회원 계정'autocomplete = 'off'class = 'name id ='nameinput 'maxlength = '18'> </div> <div> <입력 유형 = "placempted" 'sevid'pleserve '> </div> <ul id = 'corrice'> <li> 이메일 유형을 선택하십시오. 이메일 = "@sina.cn">@sina.cn </li> <li email = "@139.com">@139.com </li> </ul> </div>
CSS 코드 :
Body, Ul, Li : 0; Padding : 0; 색상 : #ccc;} ul {List-Style-Type : None;}#login {width : 250px; 배경 : #fff; 경계 : 1px 고체 #ccc; 텍스트-알림; 중심; 마진 : 10px 자동; 위치;}#rogin h2 {배경 :#fa7d3c; 색상 : #fff; 선-높이 : 40px; } .detail {}. 세부 입력 {너비 : 220px; 높이 : 30px; 마진 : 10px 자동; 테두리 : 1px solid #ccc; padding-left : 5px;} #제안 {너비 : 225px; 없음;}#제안 li {너비 : 225px; 높이 : 25px; 텍스트-정렬 : 왼쪽; cursor;}#제안 li.note {color :#989090;}#제안 li.active {background : #eee;}JS 코드 :
window.onload = function () {var s1 = new cosption (); s1.init ();}; 함수 제안 () {this.oinput = document.getElementById ( 'nameInput'); this.oul = document.getElementById ( 'proply'); this.ali = this.oul.getElementsByTagName ( 'li');} proply.prototype = {init : function () {this.tochange (); this.toblur (); }, tochange : function () {// IE : OnPropertyChange // 표준 : OnInput /*가장 짧은 브라우저를 판단하는 방법 : var isie =!-[1,]* /var IE =!-[1,]; //이 포인팅,이 포인팅 문제 var this = this; if (예 : this.oinput.onpropertyChange = function () {if (this.oinput.value == '') {this.tips (); //? 널 값이 IE Return에있을 때 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'; }}, 팁 : function () {var value = this.oinput.value; // 일반 일치 var re = new regexp ( '@'+value.substring (value.indexof ( '@')+1)+''); // console.log (re); // 버그 수정 : 모든 내용이 한 번에 지워지고 (var i = 1; the.ali.length; i ++) {this.ali [i] .style.display = 'block'; } if (re.Test (value)) {// @ input의 상황과 일치합니다 (var i = 1; the.ali.length; i ++) {var oemail = this.ali [i] .getAttribute ( 'email'); if (i == 1) {this.ali [i] .innerhtml = value; } else {if (re.test (oemail)) {// 일치가 표시됩니다. 그렇지 않으면 this.ali [i] .style.display = 'block'; } 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 레이어를 입력 한 후 블러 이벤트를 트리거하고 ul 레이어}}}}우리는 여러 개의 지점과 작은 세부 사항을 처리해야합니다. 우리는 또한 이것이 객체 지향적 문제에서 종종 발생한다고 생각합니다. 이 경우를 통해 우리는 이것을 잘 이해하고 있습니다.
위는이 기사의 모든 내용입니다. 모든 사람의 학습에 도움이되기를 바랍니다. 모든 사람이 wulin.com을 더 지원하기를 바랍니다.