幽灵资源网 Design By www.bzswh.com
最近在好好的研究JS，通过一个仿邮箱登录提示框的案例加深下对面向对象的理解！啥都别说，先上图：
功能：实现正则匹配显示相符的内容、键盘事件、鼠标事件
简单布局：
<div id="login">
<h2>仿微博登录</h2>
<div class="detail">
<input type="text" placeholder='邮箱/会员账号/手机号' autocomplete='off' class='name' id='nameInput' maxlength='18'>
</div>
<div class="detail">
<input type="password" placeholder='请输入密码' autocomplete='off' class='password'>
</div>
<ul id='suggest'>
<li class="note">请选择邮箱类型：</li>
<li class="item" email=""></li>
<li class="item" email="@sina.com">@sina.com</li>
<li class="item" email="@163.com">@163.com</li>
<li class="item" email="@qq.com">@qq.com</li>
<li class="item" email="@126.com">@126.com</li>
<li class="item" email="@sina.cn">@sina.cn</li>
<li class="item" email="@139.com">@139.com</li>
</ul>
</div>
CSS代码：
body,ul,li,h2{margin:0;padding:0;color:#ccc;}
ul{list-style-type: none;}
#login{width:250px;background:#fff;border:1px solid #ccc;text-align: center;margin:10px auto;position:relative;}
#login h2{background:#FA7D3C;color:#fff;line-height:40px; }
.detail{}
.detail input{width:220px;height:30px;margin:10px auto;border:1px solid #ccc;padding-left:5px;}
#suggest{width:225px;height:auto;background:#fff;border:1px solid #ccc;position:absolute;top:84px;left:12px;display: none;}
#suggest li{width:225px;height:25px;line-height:25px;text-align: left;cursor: pointer;}
#suggest li.note{color:#989090;}
#suggest li.active{background:#eee;}
JS代码：
window.onload=function(){
var s1=new Suggest();
s1.init();
};
function Suggest(){
this.oInput=document.getElementById('nameInput');
this.oUl=document.getElementById('suggest');
this.aLi=this.oUl.getElementsByTagName('li');
}
Suggest.prototype={
init:function(){
this.toChange();
this.toBlur();
},
toChange:function(){
//ie：onpropertychange
//标准：oninput
/*判断IE浏览器最短方法：var isIE = !-[1,]*/
var ie=!-[1,];
//存this指向,this指向问题
var This=this;
if(ie){
this.oInput.onpropertychange=function(){
if(This.oInput.value==''){
This.tips();//?解决ie下空值时li新增内容不置空情况
return;
}
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';
}
},
tips:function(){
var value=this.oInput.value;
//正则匹配
var re=new RegExp('@'+value.substring(value.indexOf('@')+1)+'');
// console.log(re);
//bug修复：全部内容一次性清空仍可出现提示
for(var i=1;i<this.aLi.length;i++){
this.aLi[i].style.display='block';
}
if(re.test(value)){//匹配@输入后情况
for(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)){//匹配项显示，否则隐藏
this.aLi[i].style.display='block';
}else{
this.aLi[i].style.display='none';
}
}
}
}else{//未输入@之前
for(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;
//每次改变重新设置类型，不会重复
for(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;//当前索引
};
//鼠标点击事件：
this.aLi[i].onmousedown=function(){
This.oInput.value=this.innerHTML;
}
}
//键盘事件：
this.oInput.onkeydown=function(e){
var e=e||window.event;
if(e.keyCode==38){//上
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();//回车后触发blur事件隐藏ul层
}
}
}
}
需要处理好多个分支情况，处理好小细节，也感觉面向对象中比较常遇到是this指向的问题，通过这个案例好好地理解了下this。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
幽灵资源网 Design By www.bzswh.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
幽灵资源网 Design By www.bzswh.com
暂无评论...
《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线
暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。
艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒 经典版》的玩家都可以获得奖励。