CSS部分
<style>
* { padding: 0; margin: 0; }
li { list-style: none; }
body { background: #f9f9f9; font-size: 14px; }
#box { width: 450px; padding: 10px; border: 1px solid #ccc; background: #f4f4f4; margin: 10px auto; }
#fill_in { margin-bottom: 10px; }
#fill_in li { padding: 5px 0; }
#fill_in .text { width: 380px; height: 30px; padding: 0 10px; border: 1px solid #ccc; line-height: 30px; font-size: 14px; font-family: arial; }
#fill_in textarea { width: 380px; height: 100px; line-height: 20px; padding: 5px 10px; border: 1px solid #ccc; font-size: 14px; font-family: arial; overflow: auto; vertical-align: top; }
#fill_in .btn { border: none; width: 100px; height: 30px; border: 1px solid #ccc; background: #fff; color: #666; font-size: 14px; position: relative; left: 42px; }
#message_text h3 { font-size: 14px; padding: 6px 0 4px 10px; background: #ddd; border-bottom: 1px solid #ccc; }
#message_text li { background: #f9f9f9; border-bottom: 1px solid #ccc; color: #666; overflow: hidden; }
#message_text li a{ float:right;}
#message_text h3 { padding: 10px; font-size: 14px; line-height: 24px; }
#message_text p { padding: 0 10px 10px; text-indent: 28px; line-height: 20px; }
</style>
HTML部分
<body>
<div id="box">
<ul id="fill_in">
<form>
<li>姓名：<input id="txt1" type="text" class="text" /></li>
<li>内容：<textarea id="txt2"></textarea></li>
<li><input id="btn" type="button" value="提交" class="btn" /></li>
</form>
</ul>
<div id="message_text">
<h2>显示留言</h2>
<ul>
<!-- <li><h3>名字</h3><p>内容<a href="###">删除</a></p></li> -->
</ul>
</div>
</div>
</body>
JS-DOM部分
一、发布时有动画效果：
<script>
function first(obj){
if(obj.firstElementChild){
return obj.firstElementChild;
}else{
return obj.firstChild;
}
}
window.onload=function(){
var oName=document.getElementById("txt1");
var oCon=document.getElementById("txt2");
var oBtn=document.getElementById("btn");
var oUl=document.getElementById("message_text").children[1];
var timer=null;
oBtn.onclick=function(){
if(oName.value==""||oCon.value==""){
alert("用户名或者内容未填写");
return;
}
var oLi=document.createElement("li");
oLi.innerHTML="<h3>"+oName.value+"</h3><p>"+oCon.value+"<a href=‘###‘>删除</a></p>";
oName.value="";
oCon.value="";
oUl.insertBefore(oLi, first(oUl));
var start=0;
var end=oLi.offsetHeight;
oLi.style.height=0;
var change=end-start;
var t=0;
var endT=20;
clearInterval(timer);
timer=setInterval(function(){
t++;
if(t==endT){
clearInterval(timer);
}
oLi.style.height=Tween.Bounce.easeOut(t,start,change,endT)+"px";
},30);
var oLink=oLi.getElementsByTagName("a")[0];
oLink.onclick=function(){
var start=oLi.offsetHeight;
var end=0;
var change=end-start;
var t=0;
var endT=20;
clearInterval(timer);
timer=setInterval(function(){
t++;
if(t==endT){
oUl.removeChild(oLi);
clearInterval(timer);
}
oLi.style.height=Tween.Bounce.easeOut(t,start,change,endT)+"px";
},30)
}
}
}
</script>
二、发布时无动画效果：
<script>
function first(obj){
if(obj.firstElementChild){
return obj.firstElementChild;
}else{
return obj.firstChild;
}
}
window.onload=function(){
var oName=document.getElementById("txt1");
var oCon=document.getElementById("txt2");
var oBtn=document.getElementById("btn");
var oUl=document.getElementById("message_text").children[1];
oBtn.onclick=function(){
if(oName.value==""||oCon.value==""){
alert("用户名或者内容没有填写");
return;
}
var oLi=document.createElement("li");
oLi.innerHTML="<h3>"+oName.value+"</h3><p>"+oCon.value+"<a href=‘###‘>删除</a></p>";
oName.value="";
oCon.value="";
oUl.insertBefore(oLi,first(oUl));
var oLink=oLi.getElementsByTagName("a")[0];
oLink.onclick=function(){
oUl.removeChild(oLi);
}
}
}
</script>
JS-DOM：基础实操---模仿新浪微博的发布