仿新浪微博發(fā)布評(píng)論
1.html
<div class="main">
<span>你想對(duì)樓主說(shuō)點(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>
2.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;
}
3.js
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)
}
}
}
