程序里需要注意的是：<textarea>里面的内容用只能用.value获取，用.innerHTML或者.innerText是无法获取的。
程序中用有一处动画是用tween.js完成的，tween.js文件使用说明及下载地址：http://www.cnblogs.com/cloudgamer/archive/2009/01/06/1369979.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>新浪微博动画版</title> <style media="screen"> *{ margin: 0px; padding: 0px; } .outlinewrap{ width: 600px; margin: 20px auto; } .wrap{ width: 600px; height: 165px; padding: 7px; border: 1px solid #ddd; } .headWrap{ padding-top: 6px; padding-bottom:13px; } .head{ text-align: right; } .head a{ text-decoration: none; color: red; } .inputWordWrap textarea{ width: 100%; height: 77px; resize: none; outline: none; border: none; } .inputWordWrap { border: 1px solid #ccc; } footer{ margin-top: 10px; text-align: right; } #releaseBtn{ text-decoration: none; color: white; padding: 10px 20px; background-color: #ffc09f; display: inline-block; box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.15) inset; } .clickInputBordStyle{ border: 1px solid #eb7350; box-shadow: none; } .show{ overflow: hidden; width: 600px; padding: 7px; } .name{ float: left; width: 40%; padding: 10px; } .dele{ float: right; display: inline; padding: 10px; text-align: right; } .dele:hover{ color: red; cursor: pointer; } .message_text{ padding: 10px 0px; word-wrap:break-word; clear: both; } .showLeaveMesageWrap{ margin: 10px auto; border: 1px solid black; position: relative; top: -100px; overflow: hidden; } .time{ padding: 10px 0px; } </style> </head> <body> <div class="outlinewrap"> <div class="wrap"> <div class="headWrap"> <div class="head"> <a href="javascript:void(0)">置办年货省省省！红包在手年货无忧！点击领取年货红包 热门微博</a> </div> </div> <div class="inputWordWrap"> <textarea name="inputWord" rows="" cols=""></textarea> </div> <footer> <a href="#" id='releaseBtn'>发 布</a> </footer> </div> <div id="show" class="show"> </div> </div> </body> <script type="text/javascript"> var head=document.getElementsByClassName('head')[0]; var inputWordWrap=document.getElementsByClassName('inputWordWrap')[0]; var inputWord=document.querySelector('.inputWordWrap textarea'); var releaseBtn=document.getElementById('releaseBtn'); var show=document.getElementById('show'); var wordNum=140; var beyondNum=0; inputWordWrap.onclick=function(event){ event = event || window.event; if(event.stopPropagation){ event.stopPropagation(); }else{ event.cancelBubble = true; } if (inputWordWrap.className=='inputWordWrap') { inputWordWrap.className+=' clickInputBordStyle'; head.innerHTML="还可以输入" + wordNum + "字"; } } document.onclick=function(){ inputWordWrap.className='inputWordWrap'; head.innerHTML='<a href="javascript:void(0)">置办年货省省省！红包在手年货无忧！点击领取年货红包 热门微博</a>'; } inputWord.onkeyup=function(){ releaseBtn.style.background='#ff8140'; wordNum=140-this.value.length; if (wordNum<0) { beyondNum=-wordNum head.innerHTML="超出" + beyondNum + "字"; }else{ head.innerHTML="还可以输入" + wordNum + "字"; } } function getTime(){ var myDate=new Date(); var nowHour=myDate.getHours(); var nowMinute=myDate.getMinutes(); var nowMonth=myDate.getMonth(); var nowDay=myDate.getDate(); var nowSecond=myDate.getSeconds(); var nowDate=nowMonth+'月'+nowDay+'日'+nowHour + ":" + nowMinute + " 发布"; return nowDate; } releaseBtn.onclick=function(){ if (!inputWord.value || beyondNum!=0) { if (!inputWord.value) { alert('请输入内容在发布'); }else { alert('字数已超出，请删减后再发布') } }else { var showLeaveMesageWrap=document.createElement('div'); var name=document.createElement('div'); var message_text=document.createElement('div'); var time=document.createElement('div'); var dele=document.createElement('div'); showLeaveMesageWrap.className='showLeaveMesageWrap'; name.className='name'; message_text.className='message_text'; dele.className='dele'; time.className='time'; if (show.children.length==0) { show.appendChild(showLeaveMesageWrap); }else { show.insertBefore(showLeaveMesageWrap,show.children[0]); } showLeaveMesageWrap.appendChild(name); showLeaveMesageWrap.appendChild(dele); showLeaveMesageWrap.appendChild(message_text); showLeaveMesageWrap.appendChild(time); name.innerHTML='xxx'; message_text.innerText=inputWord.value; time.innerHTML=getTime(); dele.innerHTML='x'; console.log(showLeaveMesageWrap.offsetTop); animatePr(showLeaveMesageWrap); inputWord.value=''; } dele.onclick=function(){ animateDele(showLeaveMesageWrap); } // function animatePr(nod){ // var start=-100; // var end=0; // var change=end-start; // var step=0; // var maxStep=33; // var timer; // if (timer) { // clearInterval(timer); // } // timer=setInterval(function(){ // step++; // nod.style.top=start+change/maxStep*step+"px"; // var c=start+change/maxStep*step; // console.log(c); // console.log(step); // if (step==maxStep) { // clearInterval(timer); // console.log(step); // console.log(nod.offsetTop); // console.log(c); // } // },16) // } //用Tween.js写的动画效果,Tween.js文件下载地址http://www.cnblogs.com/cloudgamer/archive/2009/01/06/1369979.html function animatePr(nod){ var start=-100; var end=0; var change=end-start; var step=0; var maxStep=33; var timer; if (timer) { clearInterval(timer); } timer=setInterval(function(){ step++; nod.style.top=Tween.Bounce.easeInOut(step,start,change,maxStep)+"px"; if (step==maxStep) { clearInterval(timer) } },16) } function animateDele(showLeaveMesageWrap){ var start=showLeaveMesageWrap.offsetHeight; var end=0; var change=end-start; var step=0; var maxStep=77; var timer1; if (timer1) { clearInterval(timer1); } timer1=setInterval(function(){ step++; showLeaveMesageWrap.style.height=start+change/maxStep*step+'px'; console.log(showLeaveMesageWrap.offsetHeight); if (step==maxStep) { clearInterval(timer1); show.removeChild(showLeaveMesageWrap); console.log(3); } },16) } } </script> <script src="tween.js" type="text/javascript" charset="utf-8"></script> </html>