12
1.发表评论实例
1)css样式
*{
margin:0;
padding:0;
}
a{
text-decoration: none;
}
input{
border:0;
}
li{
list-style: none;
}
.container{
width:800px;
margin:0 auto;
/*border:1px solid #000;*/
padding:20px;
}
input{
border:1px solid #666;
width:100%;
height:100px;
padding-left:10px;
}
.content>p{
font-weight: bold;
font-size: 20px;
padding:10px;
}
.content>p>span{
font-weight: normal;
font-size:14px;
margin-left:400px;
}
.content>button{
width:70px;
height:40px;
line-height: 40px;
background: #e4393c;
border-radius: 5px;
border:0;
font-size: 16px;
font-weight: bold;
color:#fff;
margin-top:10px;
margin-left:90%;
}
.main{
width:100%;
border:1px solid #000;
overflow: hidden;
border-radius: 20px;
margin-top:20px;
padding:0 10px;
}
.main>img,.main>p{
float:left;
}
.main>img{
width:100px;
height:100px;
}
.main>p{
width:500px;
height:100px;
line-height: 100px;
padding-left:50px;
/*border:1px solid #000;*/
}
.main>button{
width:70px;
height:40px;
line-height: 40px;
background: #e4393c;
border-radius: 5px;
border:0;
font-size: 16px;
font-weight: bold;
color:#fff;
float:right;
margin-top:30px;
}
2)div
<div class='container'>
<div class='content'>
<p>你想对楼主说点什么 <span>你最多可输入30个字符</span></p>
<input type="text" name="" placeholder="请输入你想要说的内容">
<button>发表</button>
</div>
</div>
3)script
把图片做成随机数
var btn=document.querySelector('.content>button');
btn.onclick=function(){
var inputVal=document.querySelector('.content>input').value;
//动态创建元素：
//动态创建div
var div=document.createElement('div');
div.className='main';
var img=document.createElement('img');
var arr=['img/1.jpg','img/2.jpg','img/3.jpg'];
var num=Math.floor(Math.random()*3);
img.src=arr[num];
div.appendChild(img);
var p=document.createElement('p');
p.innerHTML=inputVal;
document.querySelector('.content>input').value='';
div.appendChild(p);
var button=document.createElement('button');
button.innerHTML='删除';
button.onclick=function remov(){
this.parentElement.parentElement.removeChild(this.parentElement);
}
div.appendChild(button);
document.querySelector('.container').appendChild(div);
}
2.仿新浪微博发布评论js代码
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>你想对楼主说点什么</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="发 表" 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)
}
}
}
