The effect of this code is to enter the title and content, click Publish to publish the message, and make the latest message always at the top of the content. The code is:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title> Weibo message effect</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: 'Microsoft Yahei'; } #box .span1{ position: absolute; font-size: 16px; line-height: 16px; top: 10px; left: 5px; } #box .span2{ position: absolute; font-size: 16px; line-height: 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> <div id="box"> <span class='span1'>Title: </span> <input id="title" type="text"> <span>Content: </span> <textarea id="text"></textarea> <em id="prompt">You can also enter <var id="textnum">200</var>word</em> <em id="prompt1">You have exceeded <var id="textnum1"></var>word</em> <button id="send">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('Pro~Title or Content cannot be empty'); 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]);//No, I don’t know which one is bound to. } } } text.onfocus=function(){ // console.log(prompt.children[0].innerHTML);//children refers to a child node with a tag; 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='You can also enter <var id="textnum">'+num+'</var>'; } if (text.value.length>=190&&text.value.length<=200){ var num=200-text.value.length; // prompt.style.color='black'; textnum.style.color='red';// Why doesn't it turn red? Because this girl is also a future event! // prompt.innerHTML='You can also enter <var id="textnum">'+num+'</var>'; 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>This code mainly uses some knowledge of DOM node operation, which is purely a work to practice while learning. You can refer to it.
The above is all the content of this article. I hope it will be helpful to everyone's learning and I hope everyone will support Wulin.com more.