微博登录界面的实现
2016-05-26 16:27
288 查看
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style>
*{ margin:0; padding:0;}
body{ font:12px/1.125 Arial,Helvetica,sans-serif;}
li{ list-style:none;}
#login{ width:252px; height:385px; background:url(bg.jpg) no-repeat; margin:20px auto; position:relative;}
.detail{margin:0 0 5px 30px; position:relative; top:110px;}
.detail input{ color: #999999; border:1px solid #74C8E5; border-radius:3px 3px 3px 3px; height:15px; line-height:14px; padding:8px 5px 7px; width:184px;}
#suggest{ background:none repeat scroll 0 0 #FFFFFF; border:1px solid #CCCCCC; left:30px; margin:0; overflow:hidden; padding:0; position:absolute; text-align:left; top:142px; visibility:visible; width:194px ;z-index:1; display:none;}
.note, .item{ clear: both; color: #999999; cursor: pointer; font-size: 12px; height: 20px; line-height: 20px; list-style: none outside none; margin: 0 1px; padding: 0 5px; white-space: nowrap;}
.active{ white-space:nowrap; clear:both; color:rgb(153, 153, 153); cursor:pointer; font-size:12px; height:20px; line-height:20px; list-style:none outside none; margin:0pt 1px; padding:0pt 5px; background:none repeat scroll 0% 0% rgb(232, 244, 252);}
</style>
<script>
window.onload=function(){
var s1=new Suggest();
s1.init();
};
function Suggest(){
this.oInput = document.getElementById('input1');
this.oUl = document.getElementById('suggest');
this.aLi = this.oUl.getElementsByTagName('li');
}
//面向对象函数的原型链,每个函数之间用逗号隔开
Suggest.prototype={
init: function(){
this.toChang();
this.toBlur();
},
toChang:function(){
//ie : onpropertychange
//标准 : oninput
var ie = !-[1,];
var This=this;
if(ie){
this.oInput.onpropertychange=function(){
if(This.oInput.value==''){
This.tips();
return
}
This.thowUl();
This.tips();
This.sel(1);
};
}
else{
this.oInput.oninput=function(){
This.thowUl();
This.tips();
This.sel(1);//默认选中第二行
};
}
},
//显示列表函数
thowUl : function(){
this.oUl.style.display = 'block';
},
toBlur : function(){
//在哪个方法下调用，this就指向哪个对象，这里的this指向oInput
var This = this;//只要用到this 都写上这一句吧，
//这里的this也可以用This代替，
this.oInput.onblur = function(){
This.oUl.style.display = 'none';
};
},
tips:function(){
var value=this.oInput.value;
//@之前是往li中添加，之后是进行筛选，要不输入的都是添加到li中
//正则匹配@之后的字符串,substring截取@后面的字符串，indexOf('@')找到@所在的位置直到最后
var re=new RegExp('@'+value.substring(value.indexOf('@')+1)+'');
//如果不加这一句，当输入一次后，全部删除，输第二次的时候就没匹配了，第二次不会进行re.test(value)，直接到else了
for(var i=1;i<this.aLi.length;i++){
this.aLi[i].style.display = 'block';
}
//如果匹配不到，直接添加即可，如果匹配到，匹配到的显示出来，剩余的隐藏
if(re.test(value)){
for(var i=0;i<this.aLi.length;i++){
var oEmail=this.aLi[i].getAttribute('email');
if(i==1){
this.aLi[i].innerHTML=value;
}
else{
//否则，匹配oEmail,如果与输入匹配到的就显示，匹配不到的就隐藏
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++){
//DOM方式获取自定义标签email,如果自定义标签的值为空，则li的值为Oinput的值，否则，为输入框的值加上原本li标签的值
//getAttribute() 方法返回指定属性名的属性值。
var oEmail=this.aLi[i].getAttribute('email');
if(!oEmail){
this.aLi[i].innerHTML=value;
}
else{
this.aLi[i].innerHTML=value+oEmail;
}
}
}
},
//选中函数
sel:function(iNow){
//这里的this不可以用This代替，在sel下都可以用this，一旦sel下的另一函数用指针，就要有This
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.aLi[iNow].className='active';
//this.className='active';//这两句没区别
iNow=this.index;
};
this.aLi[i].onmousedown=function(){
This.oInput.value=this.innerHTML;//这里也可以用This.aLi[iNow].innerHTML;
This.oInput.blur();//选中后让光标离开，否则，li标签不会隐藏
};
}
//添加键盘上下键的操作
this.oInput.onkeydown=function(ev){
var ev = ev||window.event;//event对象获取键值，按下的是那个键
//38代表向上箭头，40 代表向下箭头，还要考虑的是走到最后把INow重新变成0
if(ev.keyCode==38){//向上
if(iNow==0){
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(ev.keyCode==40){//向下
if(iNow==This.aLi.length-1){
iNow=0;
}
else{
iNow++;
}
//先把所有的都变成未选中状态
for(var i=1;i<This.aLi.length;i++){
This.aLi[i].className='item';
}
This.aLi[iNow].className='active';
}
//13回车
else if(ev.keyCode==13){//回车
This.oInput.value=This.aLi[iNow].innerHTML;
}
};
},
};
</script>
<body>
<div id="login">
<div class="detail">
<input id="input1" type="text" maxlength="128" placeholder="邮箱/会员帐号/手机号" autocomplete="off" node-type="loginname" class="name" tabindex="1" name="loginname">
</div>
<div class="detail">
<input type="password" maxlength="24" placeholder="请输入密码" node-type="password" class="pass" tabindex="2" name="password"></div>
<ul id="suggest">
<li class="note">请选择邮箱类型</li>
<li email="" class="item"></li>
<li email="@sina.com" class="item">@sina.com</li>
<li email="@163.com" class="item">@163.com</li>
<li email="@qq.com" class="item">@qq.com</li>
<li email="@126.com" class="item">@126.com</li>
<li email="@vip.sina.com" class="item">@vip.sina.com</li>
<li email="@sina.cn" class="item">@sina.cn</li>
<li email="@hotmail.com" class="item">@hotmail.com</li>
<li email="@gmail.com" class="item">@gmail.com</li>
<li email="@sohu.com" class="item">@sohu.com</li>
<li email="@yahoo.cn" class="item">@yahoo.cn</li>
<li email="@139.com" class="item">@139.com</li>
<li email="@wo.com.cn" class="item">@wo.com.cn</li>
<li email="@189.cn" class="item">@189.cn</li>
</ul>
</div>
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style>
*{ margin:0; padding:0;}
body{ font:12px/1.125 Arial,Helvetica,sans-serif;}
li{ list-style:none;}
#login{ width:252px; height:385px; background:url(bg.jpg) no-repeat; margin:20px auto; position:relative;}
.detail{margin:0 0 5px 30px; position:relative; top:110px;}
.detail input{ color: #999999; border:1px solid #74C8E5; border-radius:3px 3px 3px 3px; height:15px; line-height:14px; padding:8px 5px 7px; width:184px;}
#suggest{ background:none repeat scroll 0 0 #FFFFFF; border:1px solid #CCCCCC; left:30px; margin:0; overflow:hidden; padding:0; position:absolute; text-align:left; top:142px; visibility:visible; width:194px ;z-index:1; display:none;}
.note, .item{ clear: both; color: #999999; cursor: pointer; font-size: 12px; height: 20px; line-height: 20px; list-style: none outside none; margin: 0 1px; padding: 0 5px; white-space: nowrap;}
.active{ white-space:nowrap; clear:both; color:rgb(153, 153, 153); cursor:pointer; font-size:12px; height:20px; line-height:20px; list-style:none outside none; margin:0pt 1px; padding:0pt 5px; background:none repeat scroll 0% 0% rgb(232, 244, 252);}
</style>
<script>
window.onload=function(){
var s1=new Suggest();
s1.init();
};
function Suggest(){
this.oInput = document.getElementById('input1');
this.oUl = document.getElementById('suggest');
this.aLi = this.oUl.getElementsByTagName('li');
}
//面向对象函数的原型链,每个函数之间用逗号隔开
Suggest.prototype={
init: function(){
this.toChang();
this.toBlur();
},
toChang:function(){
//ie : onpropertychange
//标准 : oninput
var ie = !-[1,];
var This=this;
if(ie){
this.oInput.onpropertychange=function(){
if(This.oInput.value==''){
This.tips();
return
}
This.thowUl();
This.tips();
This.sel(1);
};
}
else{
this.oInput.oninput=function(){
This.thowUl();
This.tips();
This.sel(1);//默认选中第二行
};
}
},
//显示列表函数
thowUl : function(){
this.oUl.style.display = 'block';
},
toBlur : function(){
//在哪个方法下调用，this就指向哪个对象，这里的this指向oInput
var This = this;//只要用到this 都写上这一句吧，
//这里的this也可以用This代替，
this.oInput.onblur = function(){
This.oUl.style.display = 'none';
};
},
tips:function(){
var value=this.oInput.value;
//@之前是往li中添加，之后是进行筛选，要不输入的都是添加到li中
//正则匹配@之后的字符串,substring截取@后面的字符串，indexOf('@')找到@所在的位置直到最后
var re=new RegExp('@'+value.substring(value.indexOf('@')+1)+'');
//如果不加这一句，当输入一次后，全部删除，输第二次的时候就没匹配了，第二次不会进行re.test(value)，直接到else了
for(var i=1;i<this.aLi.length;i++){
this.aLi[i].style.display = 'block';
}
//如果匹配不到，直接添加即可，如果匹配到，匹配到的显示出来，剩余的隐藏
if(re.test(value)){
for(var i=0;i<this.aLi.length;i++){
var oEmail=this.aLi[i].getAttribute('email');
if(i==1){
this.aLi[i].innerHTML=value;
}
else{
//否则，匹配oEmail,如果与输入匹配到的就显示，匹配不到的就隐藏
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++){
//DOM方式获取自定义标签email,如果自定义标签的值为空，则li的值为Oinput的值，否则，为输入框的值加上原本li标签的值
//getAttribute() 方法返回指定属性名的属性值。
var oEmail=this.aLi[i].getAttribute('email');
if(!oEmail){
this.aLi[i].innerHTML=value;
}
else{
this.aLi[i].innerHTML=value+oEmail;
}
}
}
},
//选中函数
sel:function(iNow){
//这里的this不可以用This代替，在sel下都可以用this，一旦sel下的另一函数用指针，就要有This
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.aLi[iNow].className='active';
//this.className='active';//这两句没区别
iNow=this.index;
};
this.aLi[i].onmousedown=function(){
This.oInput.value=this.innerHTML;//这里也可以用This.aLi[iNow].innerHTML;
This.oInput.blur();//选中后让光标离开，否则，li标签不会隐藏
};
}
//添加键盘上下键的操作
this.oInput.onkeydown=function(ev){
var ev = ev||window.event;//event对象获取键值，按下的是那个键
//38代表向上箭头，40 代表向下箭头，还要考虑的是走到最后把INow重新变成0
if(ev.keyCode==38){//向上
if(iNow==0){
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(ev.keyCode==40){//向下
if(iNow==This.aLi.length-1){
iNow=0;
}
else{
iNow++;
}
//先把所有的都变成未选中状态
for(var i=1;i<This.aLi.length;i++){
This.aLi[i].className='item';
}
This.aLi[iNow].className='active';
}
//13回车
else if(ev.keyCode==13){//回车
This.oInput.value=This.aLi[iNow].innerHTML;
}
};
},
};
</script>
<body>
<div id="login">
<div class="detail">
<input id="input1" type="text" maxlength="128" placeholder="邮箱/会员帐号/手机号" autocomplete="off" node-type="loginname" class="name" tabindex="1" name="loginname">
</div>
<div class="detail">
<input type="password" maxlength="24" placeholder="请输入密码" node-type="password" class="pass" tabindex="2" name="password"></div>
<ul id="suggest">
<li class="note">请选择邮箱类型</li>
<li email="" class="item"></li>
<li email="@sina.com" class="item">@sina.com</li>
<li email="@163.com" class="item">@163.com</li>
<li email="@qq.com" class="item">@qq.com</li>
<li email="@126.com" class="item">@126.com</li>
<li email="@vip.sina.com" class="item">@vip.sina.com</li>
<li email="@sina.cn" class="item">@sina.cn</li>
<li email="@hotmail.com" class="item">@hotmail.com</li>
<li email="@gmail.com" class="item">@gmail.com</li>
<li email="@sohu.com" class="item">@sohu.com</li>
<li email="@yahoo.cn" class="item">@yahoo.cn</li>
<li email="@139.com" class="item">@139.com</li>
<li email="@wo.com.cn" class="item">@wo.com.cn</li>
<li email="@189.cn" class="item">@189.cn</li>
</ul>
</div>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- JQuery1——基础（$对象，选择器，对象转换）
- Android学习笔记（二九）：嵌入浏览器
- Android java 与 javascript互访(相互调用)的方法例子
- 【CF应用开发大赛】微博社交简历
- 微博回应“用户信息被出售”事件：已上报司法机关
- Web布局连载——两栏固定布局（五）
- JavaScript演示排序算法
- javascript实现10进制转为N进制数
- 我是运营，我没有假期
- [div+css]晒晒最新制作专题推广页模板
- 在Windows 8.1的IE 11中屏蔽双击放大功能
- 最后一次说说闭包
- Ajax
- 盒子模型
- CSS选择器
- CSS样式优先权
- HTML5调用摄像头实例
- 2019年开发人员应该学习的8个JavaScript框架
- [网络资讯]新浪微博新版三栏布局开放公测