简易的仿微博发布的效果

最新推荐文章于 2019-01-11 13:09:27 发布

原创最新推荐文章于 2019-01-11 13:09:27 发布 · 802 阅读

0 ·

CC 4.0 BY-SA版权

web前端专栏收录该内容

13 篇文章

订阅专栏

<!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>