js控住DOM实现发布微博效果

2019-11-20 09:07:47

字体：大中小

来源：转载

供稿：网友

这段代码的效果具体是输入标题和内容，点击发布把消息发布出去，并使最新的消息始终在内容的最上面，代码为：

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>微博消息效果</title> <style> *{margin:0;padding: 0;} .warp{  width: 600px;  margin:50px auto 0;  background-color: #ccc; } #box{  width: 600px;  height: 340px;  /*background-color: #ccc;*/  position: relative;  /*overflow: hidden;*/  /*margin:50px auto 0;*/  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:10px auto 0px;  padding-bottom: 5px; } #news li{  width: 490px;  font-size: 14px;  overflow: hidden;  background-color: #fff;  margin-bottom: 5px;  position: relative; } #news li h1{  font-size: 16px;  line-height: 20px; } #news li p{  text-indent: 5px;  clear: left; } #news li span{  position: absolute;  top: 0px;  right: 0px;  cursor: pointer; } #news span:hover{  color: red; } </style></head><body> <div class="warp">  <div id="box">   <span class='span1'>标题：</span>   <input id="title" type="text">   <span class="span2">内容：</span>   <textarea id="text"></textarea>   <em id="prompt">还可以输入<var id="textnum">200</var>字</em>   <em id="prompt1">你已超出<var id="textnum1"></var>字</em>   <button id="send">发送</button>  </div>  <ul id="news">    <li><h1></h1><span></span>      <p></p>    </li>   </ul> </div> <script>  var title=document.getElementById('title');  var text=document.getElementById('text');  var send=document.getElementById('send');  var ul=document.getElementById('news');  var lis=ul.getElementsByTagName('li');  var prompt=document.getElementById('prompt');  var prompt1=document.getElementById('prompt1');  var textnum=document.getElementById('textnum');  var textnum1=document.getElementById('textnum1');  var timer1=null,timer2=null;  send.onclick=function(){   if (text.value==''||title.value=='') {    alert('亲~标题或内容不能为空');return false;   }   lis[0].innerHTML='<h1>'+title.value+'</h1><span>×</span><p>'+text.value+'</p>';   lis[0].children[1].setAttribute('id','close');   var newLi=document.createElement('li');   ul.insertBefore(newLi,lis[0]);   maxheight=lis[1].clientHeight;   lis[1].style.height=0+'px';   var x=0;   var minstep=0;   var maxstep=20;   var change=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='';   var close=document.getElementById('close');    for (var i = 0; i < lis.length; i++) {     close.onclick=function(){      var isme=this.parentNode;      var x=this.parentNode.clientHeight;     var minstep=0;     var maxstep=20;     var change=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){     var num=200-text.value.length;     textnum.style.color='black';     // prompt.style.color='black';     textnum.innerHTML=num;//     // prompt.innerHTML='还可以输入<var id="textnum">'+num+'</var>字</em>';    }    if (text.value.length>=190&&text.value.length<=200){     var num=200-text.value.length;     // prompt.style.color='black';     textnum.style.color='red';//为什么不变红呢？因为这他妹的也是一个未来事件！     // prompt.innerHTML='还可以输入<var id="textnum">'+num+'</var>字</em>';     textnum.innerHTML=num;    }    if (text.value.length>200){     var num=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节点操作的知识，纯属学习之余练手作品，大家可以参考参考。

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

上一篇：js实现简单的碰壁反弹效果

下一篇：AngularJS动态生成div的ID源码解析