css+js简易微博效果
2017-05-24 本文已影响0人
郭钰涛
<style>
#d1{
width: 800px;
height: 500px;
border: 5px solid black;
}
#txt{
width: 300px;
height: 200px;
border: 2px solid #ccc;
}
#d2{
width: 200px;
}
li{
list-style: none;
}
</style>
</head>
<body>
<div id="d1">
<textarea id="txt" cols="30" rows="10"></textarea>
<button id="btn">发布</button>
<ul id="ul1"></ul>
</div>
</body>
<script>
var oBtn=document.getElementById('btn');
var oTxt=document.getElementById('txt');
var oUl1=document.getElementById('ul1');
oBtn.onclick=function(){
var newLi = document.createElement('li');
var child=oUl1.children;
oUl1.insertBefore(newLi,child[0]);
newLi.innerHTML=txt.value;
}
</script>
