仿新浪微博發(fā)布評論

1)css樣式

.main{
width: 800px;
margin:20px auto;
}
span{
display: inline-block;
width: 200px;
height: 25px;
line-height: 25px;
vertical-align: middle;
text-align: left;
margin-bottom: 10px;
}
.tag{
font-size: 13px;
margin-left: 370px;
vertical-align: bottom;
text-align: center;
margin-bottom: 0;
}
.text{
width: 750px;
height: 180px;
margin:0 auto;
resize:none;
}
input{
display: inline-block;
width: 80px;
height: 50px;
background: #E2526F;
border: 0;
margin-left: 670px;
margin-top: 10px;
}
.creatediv{
width: 675px;
height: 80px;
border: 1px solid gray;
position: relative;
margin-top: 10px;
padding-left: 75px;
}
.createinput{
width: 80px;
height: 30px;
position:absolute;
right: 5px;
bottom:5px;
}
.createimg{
width: 50px;
height: 50px;
position: absolute;
top: 15px;
left: 15px;
}
.createdivs{
width:600px;
height:50px;
position: absolute;
top: 15px;
left: 85px;
}
2)div

<div class="main">
<span>你想對樓主說點(diǎn)什么</span>
<span class="tag">你最多可以輸入30個(gè)字符</span>
<textarea id="text" cols="30" rows="10" maxlength="30" class="text" spellcheck="false"></textarea>

<input type="button" value="發(fā) 表" id="ipt">
<div id="txt" ></div>
</div>
3)script

var textarea=document.getElementById("text");
var ipt=document.getElementById("ipt");
var txt=document.getElementById("txt");
ipt.onclick=function(){
var txtValue=textarea.value;
if(txtValue.length>0){
var divs=document.createElement("div");
var imgs=document.createElement("img");
var ps=document.createElement("p");
var inputs=document.createElement("input");
divs.setAttribute("class","creatediv");
imgs.setAttribute("class","createimg");
ps.setAttribute("class","createdivs");
inputs.setAttribute("class","createinput");
img.src="pic/1.jpg";
input.type="button";
inputs.value="刪除";
ps.innerHTML=txtValue;
divs.appendChild(imgs);
divs.appendChild(ps);
divs.appendChild(inputs);
if(txt.children.length==0){
txt.appendChild(divs);
}else{
txt.insertBefore(divs,get_firstChild(txt));
}

    inputs.onclick=function(){
        this.parentElement.parentElement.removeChild(this.parentElement)
    }
}

}
var textarea=document.getElementById("text");
var inputs=document.getElementById("ipt");
var txt=document.getElementById("txt");
ipt.onclick=function(){
var txtValue=textarea.value;
if(txtValue.length>0){
var divs=document.createElement("div");
var imgs=document.createElement("img");
var ps=document.createElement("p");
var inputs=document.createElement("input");
divs.setAttribute("class","creatediv");
imgs.setAttribute("class","createimg");
ps.setAttribute("class","createdivs");
inputs.setAttribute("class","createinput");
imgs.src="pic/1.jpg";
inputs.type="butto";
inputs.value="刪除";
ps.innerHTML=txtValue;
divs.appendChild(imgs);
divs.appendChild(ps);
divs.appendChild(inputs);
if(txt.children.length==0){
txt.appendChild(divs)
}else{
txt.appendChild(divs,get_firstChild(txt));
}

        inputs.onclick=function(){
            this.parentElement
                    .parentElement
                    .removeChild(this.parentElement)
        }

    }