Recientemente, he estado estudiando bien a JS y profundizando mi comprensión de los objetos orientados a través de un caso de un cuadro de sesión de inicio de sesión de correo electrónico falso. No digas nada, primero tomemos una foto:
Función: realice una coincidencia regular para mostrar contenido consistente, eventos de teclado y eventos del mouse
Diseño simple:
<div id = "login"> <h2> imitation weibo login </h2> <div> <input type = "text" placeholder = 'email/member Cuenta/número de teléfono móvil' Autocomplete = 'Off' class = 'name' id = 'nameInput' maxLength = '18 '> </div> <iv> <iv> <input type = "Password" Password =' Por favor, ingrese contraseña 'AUTOCOLTOLETE' </div> <ul id='suggest'> <li>Please select the email type: </li> <li email=""></li> <li email="@sina.com">@sina.com</li> <li email="@163.com">@163.com</li> <li email="@qq.com">@qq.com</li> <li email="@126.com">@126.com</li> <li Correo electrónico = "@sina.cn">@sina.cn </li> <li email = "@139.com">@139.com </li> </ul> </div>
Código CSS:
cuerpo, ul, li, h2 {margen: 0; relleno: 0; color: #ccc;} ul {list-style-type: none;}#login {ancho: 250px; fondos: #fff; borde: 1px sólido #ccc; text-align: centro; margen: 10px auto; posición: relativo;}#login H2 {fondo:#fa7d3c; color: #fff; line-height: 40px; } .detail {}. Entrada de detalle {ancho: 220px; altura: 30px; margin: 10px Auto; border: 1px sólido #ccc; padding-left: 5px;} #sugerir {width: 225px; altura: altura; fondo: #ffff; border: 1px sólido #ccc; posición: absoluto; top: 84px: 12px; 12px; DISPLEA; Ninguno;}#Sugerir li {ancho: 225px; altura: 25px; text-align: izquierda; cursor: pointer;}#sugiere li.note {color:#989090;}#sugiere li.active {fondo: #eee;}Código JS:
Window.Onload = function () {var s1 = new Sugerir (); s1.init ();}; function sugería () {this.oinput = document.getElementById ('nameInput'); this.oul = document.getElementById ('sugerir'); this.ali = this.oul.getElementsByTagName ('li');} sugerir.prototype = {init: function () {this.tochange (); this.toblur (); }, toChange: function () {// es decir: onPropertychange // estándar: onInput /*Cómo juzgar el navegador IE más corto: var isie =!-[1,]* /var ie =!-[1,]; // Guardar este punto, este problema de punta var this = this; if (ie) {this.oinput.onpropertychange = function () {if (this.oinput.value == '') {this.tips (); //? } This.showul (); This.tips (); This.sel (1); // Seleccione el primer elemento}; } else {this.oinput.oninput = function () {this.showul (); This.tips (); This.sel (1); // Seleccione el primer elemento}}}, 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; // Match regular var re = new Regexp ('@'+value.substring (value.indexof ('@')+1)+''); // console.log (re); // corrección de errores: todos los contenidos se borran a la vez y aún se solicitan (var i = 1; i <this.ali.length; i ++) {this.ali [i] .style.display = 'block'; } if (re.test (valor)) {// coincide con la situación después de @ entrada para (var i = 1; i <this.ali.length; i ++) {var oemail = this.ali [i] .getAttribute ('correo electrónico'); if (i == 1) {this.ali [i] .innerhtml = valor; } else {if (re.test (oemail)) {// se muestra la coincidencia, de lo contrario esconde esto.ali [i] .style.display = 'block'; } else {this.ali [i] .style.display = 'none'; }}}} else {// antes de que se ingrese @ if (! oemail) {this.ali [i] .innerhtml = valor; } else {this.ali [i] .innerhtml = valor+oemail; }}}}}, sel: function (inow) {// pausa el índice actual var this = this; // Cada vez que cambie el tipo de reinicio, no se repetirá para (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 = 'activo'; } para (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 = 'activo'; inow = this.index; // índice actual}; // Evento de clic del mouse: this.ali [i] .onMouseDown = function () {this.oinput.value = this.innerhtml; }} // Evento de teclado: 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--; } para (var i = 1; i <this.ali.length; i ++) {this.ali [i] .classname = 'item'; } This.ali [inow] .classname = 'activo'; } else if (e.keycode == 40) {// if (inow == this.ali.length-1) {inow = 1; } else {inow ++; } para (var i = 1; i <this.ali.length; i ++) {this.ali [i] .classname = 'item'; } This.ali [inow] .classname = 'activo'; } else if (e.keycode == 13) {// Ingrese esto.oinput.value = this.ali [inow] .innerhtml; This.oinput.blur (); // activar el evento Blur después de ingresar y ocultar la capa UL}}}}Necesitamos lidiar con múltiples ramas y pequeños detalles. También creemos que esto a menudo se encuentra en problemas orientados a objetos. A través de este caso, tenemos una buena comprensión de esto.
Lo anterior es todo el contenido de este artículo. Espero que sea útil para el aprendizaje de todos y espero que todos apoyen más a Wulin.com.