7.27

仿新浪微博发布评论

1.html

<div class="main">
<span>你想对楼主说点什么</span>
<span class="tag">你最多可以输入30个字符</span>
<textarea id="text" cols="30" rows="10" maxlength="30" class="text" spellcheck="false"></textarea>

<input type="button" value="发表" 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)
    }
}

}

推荐阅读更多精彩内容