CSS Section
<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 section
<body>
<div id= "box" >
<ul id= "Fill_in" >
<form>
<li> Name: <input id= "Txt1" type= "text" class= "text"/></li>
<li> content: <textarea id= "Txt2" ></textarea></li>
<li><input id= "btn" type= "button" value= "Submit" class= "BTN"/></li>
</form>
</ul>
<div id= "Message_text" >
<ul>
<!--<li></ul>
</div>
</div>
</body>
Js-dom part
First, the publication has the animation effect:
<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 ("User name or content not filled in");
Return
}
var oli=document.createelement ("Li");
Oli.innerhtml= "
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>
Second, the release of no animation effect:
<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 ("User name or content not filled in");
Return
}
var oli=document.createelement ("Li");
Oli.innerhtml= "
Oname.value= "";
Ocon.value= "";
Oul.insertbefore (Oli,first (Oul));
var olink=oli.getelementsbytagname ("a") [0];
Olink.onclick=function () {
Oul.removechild (OLi);
}
}
}
</script>