一个仿微博登陆邮箱提示框射流研究…开发案例

最近在好好的研究JS，通过一个仿邮箱登录提示框的案例加深下对面向对象的理解！啥都别说，先上图：

功能：实现正则匹配显示相符的内容、键盘事件、鼠标事件

简单布局：

div id='login' h2仿微博登录/h2 div class='detail '输入类型=“文本”占位符='邮箱/会员账号/手机号自动完成=' off ' class=' name ' id=' NameInput ' maxlength=' 18 '/div div class=' detail ' input type=' password ' placeholder='请输入密码自动完成='关闭类='密码/div ul id='建议' li class='注意'请选择邮箱类型：/Li Li=' item '电子邮件=' '/Li Li=' item ' email='@sina.com'@sina.com/li Li=' item ' email='@163.com'@163.com/li Li=' item ' email='@qq.com'@qq.com/li 李='项李='项李='项' CSS代码：

车身，ul，li，h2 { margin:0划水：0;color : # CCC } ul { list-style-type : none；} #登录{宽度：250像素背景# fffborder:1px固体# ccc文本对齐：中心；margin:10px汽车；位置：相对；} #登录H2 { background : # fa7d 3 ccolor : # fff线高：40 px}.详细信息{}。详细输入{宽度：220像素高度：30 pxmargin:10px汽车；border:1px固体# ccc左衬垫：5 px} #建议{ width :225 px h8 : auto背景# fffborder:1px固体# ccc位置：绝对；top :84 pxleft :12 pxdisplay :无；} #建议Li { width :225 pxh8 :25 px线高：25 px文本-左对齐：光标：指针；} #建议li.note { color: # 989090} #建议Li . active { background : # eee } JS代码：

窗户。onload=function(){ var S1=new Supply()；S1。init()；};函数建议(){这个。oinput=文档。getelementbyid(' name input ')；这个。oul=文档。getelementbyid('建议');这个。AlI=这个。OUl。GetElementsBytagname(' Li ')；}建议。prototype={ init : function(){ this。改变()；这个。to brur()；}，以更改： FuncTion(){//ie:on property change//标准：oninput /*判断工业管理学(工业工程)浏览器最短方法：var isIE=！-[1，]*/var ie=！-[1,];//存这指向，这个指向问题这个。哼哼。onpropertytchchange=function(){ if(this。哼哼。value==' '){ this。tips()；//?解决工程师协会下空值时里新增内容不置空情况返回；}这个。show ul()；这个。tips()；这个。sel(1)；//选中第一条};} else { this。哼哼。on input=function(){ this。显示ul()；这个。tips()；这个。sel(1)；//选中第一条} } }，显示ul :函数(){ this。乌尔。风格。display=' block}，tobul :函数(){ var This=This这个。哼哼。onbulr=function(){ this。乌尔。风格。显示='无'；} }，tips : function(){ var值=this。哼哼。价值；//正则匹配var re=新的RegExp(“@”值。子串(值。indexof(“@”)1)“”；//控制台。日志(re)；//bug修复：全部内容一次性清空仍可出现提示for(var I=1；我是。阿里。长度；我){这个。阿里[我]。风格。display=' block} if(re.test(值)){//匹配@输入后情况for(var I=1；我是。阿里。长度；i ){ var oEmail=this.aLi[i].getAttribute(' email ')；if(i==1){ this.aLi[i].innerHTML=值；}else{ if(re.test(oEmail)){//匹配项显示，否则隐藏这个。阿里[我]。风格。display=' block} else { this。阿里[我]。风格。显示='无'；} } } }else{//未输入@之前for(var I=1；我是。阿里。长度；i ){ var oEmail=this.aLi[i].getAttribute(' email ')；if(！oEmail){ this.aLi[i].innerHTML=值；}else{ this.aLi[i].innerHTML=值oEmail} } } }，sel:function(iNow){//传入当前索引var This=this//每次改变重新设置类型，不会重复for(var I=1；我是。阿里。长度；i ){ this.aLi[i].如果(这。哼哼。value==' '){ this。AlI Inow .{ item } else { this . AlI[Inow].对于(var I=1；我是。阿里。长度；i ){ this.aLi[i].索引=我；this.aLi[i].onmouseover=function(){ for(var I=1；我是。阿里。长度；我){这个。AlI我]。这是一个活跃的this.index//当前索引};//鼠标点击事件：this.aLi[i].onmousedown=function(){ this。哼哼。值=这个。innerhtml} } //键盘事件：这个。哼哼。onkeydown=函数(e){ var e=e | | window。事件；if(e.keyCode==38){//上if(Inow==1){ Inow=this。阿里。长度-1；} else { Inow-；} for(var I=1；我是。阿里。长度；我){这个。AlI我]。这件事.如果(e . KeYCode==40){/else/下if(iNow==this。阿里。length-1){ iNow=1；} else { iNow } for(var I=1；我是。阿里。长度；我){这个。AlI我]。这件事.如果(e . KeYCode==13){/else/回车这个。哼哼。值=这个。AlI Inow .innerHTMLthis。哼哼。blur()；//回车后触发虚化事件隐藏保险商实验所层} } }}需要处理好多个分支情况，处理好小细节，也感觉面向对象中比较常遇到是这指向的问题，通过这个案例好好地理解了下这个。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。