简易的仿微博发布的效果

来源：互联网发布：全民目击凶手是谁知乎编辑：程序博客网时间：2024/06/05 09:33

<!DOCTYPE html ><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>倒序插入li</title><style type="text/css">#txt1{width:500px;height: 200px;resize:none;margin-left: 40px;}#bnt1{margin-left: 50px;height: 35px;width: 50px;color: #ccc;background-color: green;}#ul1 { list-style-type: decimal; }#ul1 li{ border: 1px solid red; width: 50%;margin-top: 20px;}</style></head><body><textarea id="txt1" placeholder="请输入你要发表的内容" ></textarea>    <input id="bnt1" type="button" value="发表" /><ul id="ul1"></ul><script>window.onload=function(){var oBtn=document.getElementById("bnt1");var oU1=document.getElementById("ul1");var oTxt=document.getElementById("txt1");oBtn.onclick=function(){var oLi=document.createElement("li");var aLi=oU1.getElementsByTagName("li");oLi.innerHTML=oTxt.value;if(aLi.length>0){oU1.insertBefore(oLi, aLi[0]);}else{oU1.appendChild(oLi);}}}</script></body></html>

0 0