Recentemente, tenho estudado bem o JS e aprofundando minha compreensão de objetos orientados a um caso de uma caixa de prompt de login de e-mail falsa! Não diga nada, vamos tirar uma foto primeiro:
Função: Realize a correspondência regular para exibir conteúdo consistente, eventos de teclado e eventos do mouse
Layout simples:
<div Id = "Login"> <H2> imitação weibo login </h2> <div> <input type = "text" placeholder = 'email/membro da conta/número de telefone celular' AutoComplete = 'Off' class = '' name '=' NameInput 'MAXLENGLIMENT = '18'> </div> <div> <input dype = " </div> <ul id = 'sugest'> <li> Selecione o tipo de email: </li> <li email = ""> </li> <li email = "@sina.com">@sina.com </li> <li email = "@163.com">@163.com <li> <li = "@qq.com"> email = "@sina.cn">@sina.cn </li> <li email = "@139.com">@139.com </li> </ul> </div>
Código CSS:
corpo, ul, li, h2 {margem: 0; preenchimento: 0; cor: #ccc;} ul {tyle-list-estilo: nenhum;}#login {width: 250px; fundo: #fff; borda: 1px sólido #cc; text-align: center; margin: 10px; h2 {background:#fa7d3c; cor: #fff; altura da linha: 40px; } .Detail {}. Detalhe entrada {largura: 220px; altura: 30px; margem: 10px Auto; borda: 1px sólido #ccc; padding-left: 5px;} #sugestão {width: 225px; altura: Auto; Antecedentes: #fff; Border: 1px Solid Solid; Nenhum;}#sugestion li {width: 225px; altura: 25px; text-align: esquerda; cursor: ponteiro;}#sugestion li.note {color:#989090;}#sugestion li.active {background: #eee;}Código JS:
window.onload = function () {var s1 = new sugest (); s1.init ();}; função sugest () {this.oinput = document.getElementById ('nameInput'); this.oul = document.getElementById ('sugest'); this.ali = this.oul.getElementsByTagName ('li');} sugest.prototype = {init: function () {this.tochange (); this.ToBlur (); }, tochange: function () {// ie: onPropertyChange // padrão: oninput /*como julgar o navegador mais curto do IE: var isie =!-[1,]* /var ie =!-[1,]; // Salve este apontando, esse problema apontador var this = this; if (ie) {this.oinput.onPropertyChange = function () {if (this.oinput.value == '') {this.tips (); //? Resolva a situação de adicionar novo conteúdo ao LI quando o valor nulo estiver no IE Return; } This.showul (); This.tips (); This.sel (1); // selecione o primeiro item}; } else {this.oinput.onInput = function () {this.showul (); This.tips (); This.sel (1); // selecione o primeiro item}}}, showul: function () {this.oul.style.display = 'bloqueio'; }, Toblur: function () {var this = this; this.oinput.onblur = function () {this.oul.style.display = 'nenhum'; }}, dicas: function () {var value = this.oinput.value; // correspondência regular var re = novo regexp ('@'+value.substring (value.indexOf ('@')+1)+''); // console.log (re); // Correção de bug: Todos os conteúdos são limpos de uma só vez e ainda são solicitados (var i = 1; i <this.ali.length; i ++) {this.ali [i] .style.display = 'block'; } if (re.test (value)) {// corresponde à situação após a entrada @ (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)) {// a correspondência é exibida, caso contrário, oculte isso.ali [i] .style.display = 'bloco'; } else {this.ali [i] .style.display = 'nenhum'; }}}} else {// antes de @ é inserido para (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) {// pausa o índice atual var this = this; // Toda vez que você altera o tipo de redefinição, ele não será repetido 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 = 'Active'; } 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 = 'Active'; iNow = this.index; // índice de corrente}; // Evento de clique no mouse: this.ali [i] .onMouDown = function () {this.oinput.value = this.innerhtml; }} // Evento do 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--; } 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) {// Digite this.oinput.value = this.ali [inow] .innerhtml; This.oinput.blur (); // aciona o evento Blur depois de entrar e ocultar a camada ul}}}}Precisamos lidar com várias filiais e pequenos detalhes. Também sentimos que isso é frequentemente encontrado em problemas orientados a objetos. Nesse caso, temos um bom entendimento disso.
O exposto acima é todo o conteúdo deste artigo. Espero que seja útil para o aprendizado de todos e espero que todos apoiem mais o wulin.com.