js控住DOM实现发布微博效果
这段代码的效果具体是输入标题和内容，点击发布把消息发布出去，并使最新的消息始终在内容的最上面，代码为：
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>微博消息效果</title>
<style>
*{margin:0;padding:0;}
.warp{
width:600px;
margin:50pxauto0;
background-color:#ccc;
}
#box{
width:600px;
height:340px;
/*background-color:#ccc;*/
position:relative;
/*overflow:hidden;*/
/*margin:50pxauto0;*/
font-family:'微软雅黑';
}
#box.span1{
position:absolute;
font-size:16px;
line-height:16px;
top:10px;
left:5px;
}
#box.span2{
position:absolute;
font-size:16px;
line-height:16px;
top:50px;
left:5px;
}
#title{
position:absolute;
width:460px;
height:20px;
line-height:20px;
font-size:16px;
text-indent:5px;
left:70px;
top:6px;
}
#text{
position:absolute;
width:460px;
height:250px;
resize:none;
top:50px;
left:70px;
text-indent:5px;
font-size:16px;
}
#box#prompt{
position:absolute;
top:312px;
left:340px;
}
#prompt1{
position:absolute;
top:312px;
left:340px;
display:none;
}
#send{
position:absolute;
height:25px;
width:60px;
line-height:20px;
font-size:16px;
top:310px;
right:68px;
}
#news{
list-style:none;
width:490px;
margin:10pxauto0px;
padding-bottom:5px;
}
#newsli{
width:490px;
font-size:14px;
overflow:hidden;
background-color:#fff;
margin-bottom:5px;
position:relative;
}
#newslih1{
font-size:16px;
line-height:20px;
}
#newslip{
text-indent:5px;
clear:left;
}
#newslispan{
position:absolute;
top:0px;
right:0px;
cursor:pointer;
}
#newsspan:hover{
color:red;
}
</style>
</head>
<body>
<divclass="warp">
<divid="box">
<spanclass='span1'>标题：</span>
<inputid="title"type="text">
<spanclass="span2">内容：</span>
<textareaid="text"></textarea>
<emid="prompt">还可以输入<varid="textnum">200</var>字</em>
<emid="prompt1">你已超出<varid="textnum1"></var>字</em>
<buttonid="send">发送</button>
</div>
<ulid="news">
<li><h1></h1><span></span>
<p></p>
</li>
</ul>
</div>
<script>
vartitle=document.getElementById('title');
vartext=document.getElementById('text');
varsend=document.getElementById('send');
varul=document.getElementById('news');
varlis=ul.getElementsByTagName('li');
varprompt=document.getElementById('prompt');
varprompt1=document.getElementById('prompt1');
vartextnum=document.getElementById('textnum');
vartextnum1=document.getElementById('textnum1');
vartimer1=null,timer2=null;
send.onclick=function(){
if(text.value==''||title.value==''){
alert('亲~标题或内容不能为空');returnfalse;
}
lis[0].innerHTML='<h1>'+title.value+'</h1><span>×</span><p>'+text.value+'</p>';
lis[0].children[1].setAttribute('id','close');
varnewLi=document.createElement('li');
ul.insertBefore(newLi,lis[0]);
maxheight=lis[1].clientHeight;
lis[1].style.height=0+'px';
varx=0;
varminstep=0;
varmaxstep=20;
varchange=maxheight/maxstep;
clearInterval(timer1);
timer1=setInterval(function(){
minstep++;
if(minstep>=maxstep){
clearInterval(timer1);
}
x+=change;
lis[1].style.height=x+'px';
},10)
title.value='';
text.value='';
varclose=document.getElementById('close');
for(vari=0;i<lis.length;i++){
close.onclick=function(){
varisme=this.parentNode;
varx=this.parentNode.clientHeight;
varminstep=0;
varmaxstep=20;
varchange=x/maxstep;
clearInterval(timer1);
timer1=setInterval(function(){
minstep++;
if(minstep>=maxstep){
clearInterval(timer1);
ul.removeChild(isme);
}
x-=change;
isme.style.height=x+'px';
},10)
//ul.removeChild(lis[i]);//不可以，不知道绑定的是第几个。
}
}
}
text.onfocus=function(){
//console.log(prompt.children[0].innerHTML);//children是指带有标签的子节点；
timer2=setInterval(function(){
if(text.value.length<190){
varnum=200-text.value.length;
textnum.style.color='black';
//prompt.style.color='black';
textnum.innerHTML=num;//
//prompt.innerHTML='还可以输入<varid="textnum">'+num+'</var>字</em>';
}
if(text.value.length>=190&&text.value.length<=200){
varnum=200-text.value.length;
//prompt.style.color='black';
textnum.style.color='red';//为什么不变红呢？因为这他妹的也是一个未来事件！
//prompt.innerHTML='还可以输入<varid="textnum">'+num+'</var>字</em>';
textnum.innerHTML=num;
}
if(text.value.length>200){
varnum=text.value.length-200;
//prompt.style.color='red';
prompt.style.display='none';
prompt1.style.display='block';
textnum1.style.color='red';
textnum1.innerHTML=num;
}
//console.log(text.value.length);
},50)
}
text.onblur=function(){
clearInterval(timer2);
}
</script>
</body>
</html>
这段代码主要运用了一些DOM节点操作的知识，纯属学习之余练手作品，大家可以参考参考。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。