分类分类
2015-04-29 14:05作者：zhao
Js实现无刷新删除内容
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/>
<title>仿腾讯微博效果</title>
<styletype="text/css">
body,div,h2,h3,ul,li,p{margin:0;padding:0;}
a{text-decoration:none;}
a:hover{text-decoration:underline;}
ul{list-style-type:none;}
body{color:#333;background:#3c3a3b;font:12px/1.55b8b4f53;}
#msgBox{width:500px;background:#fff;border-radius:5px;margin:10pxauto;padding-top:10px;}
#msgBoxformh2{font-weight:400;font:40018px/1.55fae8f6f96c59ed1;}
#msgBoxform{background:url()repeat-x0bottom;padding:020px15px;}
#userName,#conBox{color:#777;border:1pxsolid#d0d0d0;border-radius:6px;background:#fffurl(img/inputBG.png)repeat-x;padding:3px5px;font:14px/1.5arial;}
#userName.active,#conBox.active{border:1pxsolid#7abb2c;}
#userName{height:20px;}
#conBox{width:448px;resize:none;height:65px;overflow:auto;}
#msgBoxformdiv{position:relative;color:#999;margin-top:10px;}
#msgBoximg{border-radius:3px;}
#face{position:absolute;top:0;left:172px;}
#faceimg{width:30px;height:30px;cursor:pointer;margin-right:6px;opacity:0.5;filter:alpha(opacity=50);}
#faceimg.hover,#faceimg.current{width:28px;height:28px;border:1pxsolid#f60;opacity:1;filter:alpha(opacity=100);}
#sendBtn{border:0;width:112px;height:30px;cursor:pointer;margin-left:10px;background:url(img/btn.png)no-repeat;}
#sendBtn.hover{background-position:0-30px;}
#msgBoxform.maxNum{font:26px/30pxGeorgia,Tahoma,Arial;padding:05px;}
#msgBox.list{padding:10px;}
#msgBox.listh3{position:relative;height:33px;font-size:14px;font-weight:400;background:#e3eaec;border:1pxsolid#dee4e7;}
#msgBox.listh3span{position:absolute;left:6px;top:6px;background:#fff;line-height:28px;display:inline-block;padding:015px;}
#msgBox.listul{overflow:hidden;zoom:1;}
#msgBox.listulli{float:left;clear:both;width:100%;border-bottom:1pxdashed#d8d8d8;padding:10px0;background:#fff;overflow:hidden;}
#msgBox.listulli.hover{background:#f5f5f5;}
#msgBox.list.userPic{float:left;width:50px;height:50px;display:inline;margin-left:10px;border:1pxsolid#ccc;border-radius:3px;}
#msgBox.list.content{float:left;width:400px;font-size:14px;margin-left:10px;font-family:arial;word-wrap:break-word;}
#msgBox.list.userName{display:inline;padding-right:5px;}
#msgBox.list.userNamea{color:#2b4a78;}
#msgBox.list.msgInfo{display:inline;word-wrap:break-word;}
#msgBox.list.times{color:#889db6;font:12px/18pxarial;margin-top:5px;overflow:hidden;zoom:1;}
#msgBox.list.timesspan{float:left;}
#msgBox.list.timesa{float:right;color:#889db6;display:none;}
.tr{overflow:hidden;zoom:1;}
.trp{float:right;line-height:30px;}
.tr*{float:left;}
</style>
<scripttype="text/javascript">
varget={
byId:function(id){
returntypeofid==="string"?document.getElementById(id):id
},
byClass:function(sClass,oParent){
varaClass=[];
varreClass=newRegExp("(^|)"+sClass+"(|$)");
varaElem=this.byTagName("*",oParent);
for(vari=0;i<aElem.length;i++)reClass.test(aElem[i].className)&&aClass.push(aElem[i]);
returnaClass
},
byTagName:function(elem,obj){
return(obj||document).getElementsByTagName(elem)
}
};
/*--------------------------+
事件绑定,删除
+--------------------------*/
varEventUtil={
addHandler:function(oElement,sEvent,fnHandler){
oElement.addEventListener?oElement.addEventListener(sEvent,fnHandler,false):(oElement["_"+sEvent+fnHandler]=fnHandler,oElement[sEvent+fnHandler]
=function(){oElement["_"+sEvent+fnHandler]()},oElement.attachEvent("on"+sEvent,oElement[sEvent+fnHandler]))
},
removeHandler:function(oElement,sEvent,fnHandler){
oElement.removeEventListener?oElement.removeEventListener(sEvent,fnHandler,false):oElement.detachEvent("on"+sEvent,oElement[sEvent+fnHandler])
},
addLoadHandler:function(fnHandler){
this.addHandler(window,"load",fnHandler)
}
};
/*--------------------------+
设置css样式
读取css样式
+--------------------------*/
functioncss(obj,attr,value)
{
switch(arguments.length)
{
case2:
if(typeofarguments[1]=="object")
{
for(variinattr)i=="opacity"?(obj.style["filter"]="alpha(opacity="+attr[i]+")",obj.style[i]=attr[i]/100):obj.style[i]=attr[i];
}
else
{
returnobj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj,null)[attr]
}
break;
case3:
attr=="opacity"?(obj.style["filter"]="alpha(opacity="+value+")",obj.style[attr]=value/100):obj.style[attr]=value;
break;
}
};
EventUtil.addLoadHandler(function()
{
varoMsgBox=get.byId("msgBox");
varoUserName=get.byId("userName");
varoConBox=get.byId("conBox");
varoSendBtn=get.byId("sendBtn");
varoMaxNum=get.byClass("maxNum")[0];
varoCountTxt=get.byClass("countTxt")[0];
varoList=get.byClass("list")[0];
varoUl=get.byTagName("ul",oList)[0];
varaLi=get.byTagName("li",oList);
varaFtxt=get.byClass("f-text",oMsgBox);
varaImg=get.byTagName("img",get.byId("face"));
varbSend=false;
vartimer=null;
varoTmp="";
vari=0;
varmaxNum=140;
//禁止表单提交
EventUtil.addHandler(get.byTagName("form",oMsgBox)[0],"submit",function(){returnfalse});
//为广播按钮绑定发送事件
EventUtil.addHandler(oSendBtn,"click",fnSend);
//为Ctrl+Enter快捷键绑定发送事件
EventUtil.addHandler(document,"keyup",function(event)
{
varevent=event||window.event;
event.ctrlKey&&event.keyCode==13&&fnSend()
});
//发送广播函数
functionfnSend()
{
varreg=/^s*$/g;
if(reg.test(oUserName.value))
{
alert("u8bf7u586bu5199u60a8u7684u59d3u540d");
oUserName.focus()
}
elseif(!/^[u4e00-u9fa5w]{2,8}$/g.test(oUserName.value))
{
alert("u59d3u540du75312-8u4f4du5b57u6bcdu3001u6570u5b57u3001u4e0bu5212u7ebfu3001u6c49u5b57u7ec4u6210uff01");
oUserName.focus()
}
elseif(reg.test(oConBox.value))
{
alert("u968fu4fbfu8bf4u70b9u4ec0u4e48u5427uff01");
oConBox.focus()
}
elseif(!bSend)
{
alert("u4f60u8f93u5165u7684u5185u5bb9u5df2u8d85u51fau9650u5236uff0cu8bf7u68c0u67e5uff01");
oConBox.focus()
}
else
{
varoLi=document.createElement("li");
varoDate=newDate();
oLi.innerHTML="<divclass="userPic"><imgsrc=""+get.byClass("current",get.byId("face"))[0].src+""></div>
<divclass="content">
<divclass="userName"><ahref="javascript:;">"+oUserName.value+"</a>:</div>
<divclass="msgInfo">"+oConBox.value.replace(/<[^>]*>|/ig,"")+"</div>
<divclass="times"><span>"+format(oDate.getMonth()+1)+"u6708"+format(oDate.getDate())+
"u65e5"+format(oDate.getHours())+":"+format(oDate.getMinutes())+"</span><aclass="del"href="javascript:;">u5220u9664</a></div>
</div>";
//插入元素
aLi.length?oUl.insertBefore(oLi,aLi[0]):oUl.appendChild(oLi);
//重置表单
get.byTagName("form",oMsgBox)[0].reset();
for(i=0;i<aImg.length;i++)aImg[i].className="";
aImg[0].className="current";
//将元素高度保存
variHeight=oLi.clientHeight-parseFloat(css(oLi,"paddingTop"))-parseFloat(css(oLi,"paddingBottom"));
varalpah=count=0;
css(oLi,{"opacity":"0","height":"0"});
timer=setInterval(function()
{
css(oLi,{"display":"block","opacity":"0","height":(count+=8)+"px"});
if(count>iHeight)
{
clearInterval(timer);
css(oLi,"height",iHeight+"px");
timer=setInterval(function()
{
css(oLi,"opacity",(alpah+=10));
alpah>100&&(clearInterval(timer),css(oLi,"opacity",100))
},30)
}
},30);
//调用鼠标划过/离开样式
liHover();
//调用删除函数
delLi()
}
};
//事件绑定,判断字符输入
EventUtil.addHandler(oConBox,"keyup",confine);
EventUtil.addHandler(oConBox,"focus",confine);
EventUtil.addHandler(oConBox,"change",confine);
//输入字符限制
functionconfine()
{
variLen=0;
for(i=0;i<oConBox.value.length;i++)iLen+=oConBox.value.charAt(i).charCodeAt()>255?1:0.5;
oMaxNum.innerHTML=Math.abs(maxNum-Math.floor(iLen));
maxNum-Math.floor(iLen)>=0?(css(oMaxNum,"color",""),oCountTxt.innerHTML="u8fd8u80fdu8f93u5165",bSend=true):(css(oMaxNum,"color","#f60"),
oCountTxt.innerHTML="u5df2u8d85u51fa",bSend=false)
}
//加载即调用
confine();
//广播按钮鼠标划过样式
EventUtil.addHandler(oSendBtn,"mouseover",function(){this.className="hover"});
//广播按钮鼠标离开样式
EventUtil.addHandler(oSendBtn,"mouseout",function(){this.className=""});
//li鼠标划过/离开处理函数
functionliHover()
{
for(i=0;i<aLi.length;i++)
{
//li鼠标划过样式
EventUtil.addHandler(aLi[i],"mouseover",function(event)
{
this.className="hover";
oTmp=get.byClass("times",this)[0];
varaA=get.byTagName("a",oTmp);
if(!aA.length)
{
varoA=document.createElement("a");
oA.innerHTML="删除";
oA.className="del";
oA.href="javascript:;";
oTmp.appendChild(oA)
}
else
{
aA[0].style.display="block";
}
});
//li鼠标离开样式
EventUtil.addHandler(aLi[i],"mouseout",function()
{
this.className="";
varoA=get.byTagName("a",get.byClass("times",this)[0])[0];
oA.style.display="none"
})
}
}
liHover();
//删除功能
functiondelLi()
{
varaA=get.byClass("del",oUl);
for(i=0;i<aA.length;i++)
{
aA[i].onclick=function()
{
varoParent=this.parentNode.parentNode.parentNode;
varalpha=100;
variHeight=oParent.offsetHeight;
timer=setInterval(function()
{
css(oParent,"opacity",(alpha-=10));
if(alpha<0)
{
clearInterval(timer);
timer=setInterval(function()
{
iHeight-=10;
iHeight<0&&(iHeight=0);
css(oParent,"height",iHeight+"px");
iHeight==0&&(clearInterval(timer),oUl.removeChild(oParent))
},30)
}
},30);
this.onclick=null
}
}
}
delLi();
//输入框获取焦点时样式
for(i=0;i<aFtxt.length;i++)
{
EventUtil.addHandler(aFtxt[i],"focus",function()
{this.className="active"});
EventUtil.addHandler(aFtxt[i],"blur",function(){this.className=""})
}
//格式化时间,如果为一位数时补0
functionformat(str)
{
returnstr.toString().replace(/^(d)$/,"0$1")
}
//头像
for(i=0;i<aImg.length;i++)
{
aImg[i].onmouseover=function()
{
this.className+="hover"
};
aImg[i].onmouseout=function()
{
this.className=this.className.replace(/s?hover/,"")
};
aImg[i].onclick=function()
{
for(i=0;i<aImg.length;i++)aImg[i].className="";
this.className="current"
}
}
});
</script>
</head>
<body>
<divid="msgBox">
<form>
<h2>来,说说你在做什么,想什么</h2>
<div>
<inputid="userName"class="f-text"value=""/>
<pid="face"><imgsrc="face1.gif"class="current"/><imgsrc="face2.gif"/><imgsrc="face1.gif"/><imgsrc="face2.gif"/></p>
</div>
<div><inputid="conBox"class="f-text"></div>
<divclass="tr">
<p>
<spanclass="countTxt">还能输入</span><strongclass="maxNum">140</strong><span>个字</span>
<inputid="sendBtn"type="button"value=""title="快捷键Ctrl+Enter"/>
</p>
</div>
</form>
<divclass="list">
<h3><span>大家在说</span></h3>
<ul>
<li>
<divclass="userPic"><imgsrc="face.gif"/></div>
<divclass="content">
<divclass="userName"><ahref="javascript:;">日丶久生情</a>:</div>
<divclass="msgInfo">新增Ctrl+Enter快捷键发送广播。</div>
<divclass="times"><span>07月05日12:20</span><aclass="del"href="javascript:;">删除</a></div>
</div>
</li>
<li>
<divclass="userPic"><imgsrc="face.gif"/></div>
<divclass="content">
<divclass="userName"><ahref="javascript:;">日丶久生情</a>:</div>
<divclass="msgInfo">新增选择头像功能。</div>
<divclass="times"><span>07月05日12:08</span><aclass="del"href="javascript:;">删除</a></div>
</div>
</li>
<li>
<divclass="userPic"><imgsrc="face.gif"/></div>
<divclass="content">
<divclass="userName"><ahref="javascript:;">日丶久生情</a>:</div>
<divclass="msgInfo">增加了记录广播时间的功能。</div>
<divclass="times"><span>07月04日16:55</span><aclass="del"href="javascript:;">删除</a></div>
</div>
</li>
</ul>
</div>
</div>
</body>
</html>
以上所述就是本文给大家分享的全部内容了，希望大家能够喜欢。
相关