仿微博发表评论

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;
}

<div class='container'>
<div class='content'>
<p>你想对楼主说点什么 <span>你最多可输入30个字符</span></p>
<input type="text" name="" placeholder="请输入你想要说的内容">
<button>发表</button>
</div>
</div>

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);
}