首页 > 代码库 > 简单微博效果
简单微博效果
<style>
*{margin:0;padding:0;}
body{text-align:center;background:#000000;color:#FFFFFF;}
h1{margin:30px;font-weight:bold;}
hr{margin:20px;}
#Btn{width:100px;height:40px;margin-top:10px;}
#Ul{border:1px solid #FFFF00;width:300px;height:350px;background:#CCCCCC;margin:20px auto;overflow:hidden;}
#Ul li{border-bottom:1px solid #00FF00;list-style:none;text-align:left;color:#FF0000;}
</style>
<script>
/*
insertBefore()----------------在您指定的已有子节点之前插入新的子节点
appendChild()----------------方法向节点添加最后一个子节点,即是添加到最后
*/
window.onload=function()
{
var oUl=document.getElementById(‘Ul‘);
var oBtn=document.getElementById(‘Btn‘);
var oTxt=document.getElementById(‘Txt‘);
oBtn.onclick=function()
{
var oLi=document.createElement(‘li‘);
oLi.innerHTML=oTxt.value;
oTxt.value=http://www.mamicode.com/‘‘;
if(oUl.children.length>0)
{
//在您指定的已有子节点之前插入新的子节点
oUl.insertBefore(oLi, oUl.children[0]);
}
else
{
//方法向节点添加最后一个子节点,即是添加到最后
oUl.appendChild(oLi);
}
}
}
</script>
</head>
<body>
<h1>微博效果</h1>
<hr />
<textarea id="Txt" cols="40" rows="3"></textarea>
<br />
<input id="Btn" type="button" value="http://www.mamicode.com/发送"/>
<ul id="Ul">
</ul>
</body>
简单微博效果