Baru-baru ini, saya telah mempelajari JS dengan baik dan memperdalam pemahaman saya tentang berorientasi objek melalui kasus kotak login email palsu! Jangan katakan apa -apa, mari kita ambil gambar terlebih dahulu:
FUNGSI: REALUSI Pencocokan Reguler untuk Menampilkan Konten yang Konsisten, Acara Keyboard, dan Acara Mouse
Tata letak sederhana:
<Div id = "Login"> <H2> imitasi Weibo Login </h2> <div> <input type = "text" placeholder = 'email/akun anggota/nomor ponsel' autocomplete = 'off' class = 'name' id = 'nameInput' maxlength = '18 '> </div> <Div> <input type' »petak = '18 ' </div> <ul id = 'Sarankan'> <li> Silakan pilih tipe email: </li> <li email = ""> </li> <li email = "@sina.com">@sina.com </li> <li email = "@163.com">@163.com </li> <a email = "@qq.com">@@qq.com </Li> Li> Li> Li>@126 <126> email = "@sina.cn">@Sina.cn </li> <li email = "@139.com">@139.com </li> </ul> </div>
Kode CSS:
Body, Ul, Li, H2 {Margin: 0; Padding: 0; Color: #CCC;} Ul {List-style-Type: None;}#Login {width: 250px; latar belakang: #FFFF; BORDER: 1PX SOLID #CCC; Text-Align: Center; Margin: 10px Auto; Posisi: Relative: Relative; h2 {latar belakang:#fa7d3c; warna: #fff; line-height: 40px; } .detail {}. Input detail {lebar: 220px; tinggi: 30px; margin: 10px auto; perbatasan: 1px solid #ccc; padding-left: 5px;} #sugesti {width: 225px; tinggi: auto; latar belakang: #ffff; perbatasan: 1px #ccc; tidak ada;}#Sarankan li {width: 225px; tinggi: 25px; text-align: kiri; kursor: pointer;}#sarankan li.note {color:#989090;}#sarankan li.active {latar belakang: #eee;}Kode JS:
window.onload = function () {var s1 = new sugest (); s1.init ();}; function sugest () {this.oinput = document.geteLementById ('nameInput'); this.oul = document.geteLementById ('saran'); this.ali = this.oul.getElementsbyTagname ('li');} suges.prototype = {init: function () {this.tochange (); this.toBlur (); }, tochange: function () {// yaitu: onpropertychange // standar: oninput /*cara menilai browser IE terpendek: var isie =!-[1,]* /var ie =!-[1,]; // Simpan pointing ini, masalah penunjuk ini var this = this; if (ie) {this.oinput.onPropertyChange = function () {if (this.oinput.value == '') {this.tips (); //? Selesaikan situasi penambahan konten baru ke LI ketika nilai nol berada di bawah pengembalian IE; } This.showul (); This.tips (); This.sel (1); // pilih item pertama}; } else {this.oinput.onInput = function () {this.showul (); This.tips (); This.sel (1); // pilih item pertama}}}, 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; // pencocokan reguler var re = regexp baru ('@'+value.substring (value.indexof ('@')+1)+''); // console.log (re); // Fix bug: Semua konten dihapus sekaligus dan masih diminta untuk (var i = 1; i <this.ali.length; i ++) {this.ali [i] .style.display = 'block'; } if (re.test (value)) {// Cocokkan situasi setelah @ input untuk (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)) {// kecocokan ditampilkan, jika tidak sembunyikan this.ali [i] .style.display = 'block'; } else {this.ali [i] .style.display = 'none'; }}}} else {// Sebelum @ dimasukkan untuk (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) {// jeda indeks saat ini var this = this; // Setiap kali Anda mengubah jenis reset, itu tidak akan diulangi (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'; } untuk (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; // index saat ini}; // acara klik mouse: this.ali [i] .onmousedown = function () {this.oinput.value = this.innerHtml; }} // acara keyboard: 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--; } untuk (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 ++; } untuk (var i = 1; i <this.ali.length; i ++) {this.ali [i] .className = 'item'; } This.ali [inow] .className = 'Active'; } else if (e.keycode == 13) {// masukkan this.oinput.value = this.ali [inow] .innerHtml; This.oinput.blur (); // memicu peristiwa blur setelah memasuki dan menyembunyikan lapisan UL}}}}Kita perlu berurusan dengan banyak cabang dan detail kecil. Kami juga merasa bahwa ini sering ditemui dalam masalah yang berorientasi pada objek. Melalui kasus ini, kami memiliki pemahaman yang baik tentang ini.
Di atas adalah semua konten artikel ini. Saya berharap ini akan membantu untuk pembelajaran semua orang dan saya harap semua orang akan lebih mendukung wulin.com.