你的位置:首页 > Java教程

[Java教程]js控住DOM实现发布微博简单效果


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

<!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节点操作的知识,纯属学习之余练手作品,大家可以参考参考。