微博評論

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><br>
? ? <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)
? ? ? ? }
? ? }
}