留言板
2018-09-14 本文已影响0人
北觅_Sir
仿微博留言板
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin:0;
padding:0;
box-sizing: border-box;
}
a{
text-decoration: none;
}
li{
list-style: none;
}
.container{
width:800px;
margin:50px auto;
border:1px solid #000;
}
button{
border:none;
}
input{
width:800px;
height:100px;
margin:20px 0;
}
.btn{
text-align: right;
}
.btn>button{
width:80px;
height:40px;
line-height:40px;
background: #f00;
color:#fff;
border-radius: 5px;
font-size: 16px;
}
.main>li{
border:1px solid #000;
overflow: hidden;
height:100px;
line-height: 100px;
}
.main>li>img{
float:left;
margin-top:25px;
width:50px;
}
.main>li>p{
float: left;
width:500px;
text-align: center;
}
.main>li>button{
float:right;
width:80px;
height:40px;
line-height:40px;
background: #f00;
color:#fff;
border-radius: 5px;
font-size: 16px;
margin-top:30px;
}
</style>
</head>
<body>
<div class='container'>
<div class='box'>
<h2>你想对博主说点什么</h2>
<input type="text" placeholder="请输入你想说的内容">
<p class='btn'><button>发表</button></p>
</div>
<ul class='main'>
<!--
<li>
<img src="img/1.gif" alt="">
<p>分单号和规范化股份</p>
<button>删除</button>
</li>
-->
</ul>
</div>
<script>
//1.点击按钮发表评论
var btn=document.querySelector('.btn>button');
btn.onclick=function(){
//获取input的value值
var val=document.querySelector('input').value;
//创建元素
//li
var li=document.createElement('li');
//创建img
var arr=['img/1.png','img/2.png','img/3.png'];
//随机数：
//Math.floor(Math.random()*(max-min+1)+min);
var num=Math.floor(Math.random()*(2-0+1)+0);
var img=document.createElement('img');
img.src=arr[num];
//追加img
li.appendChild(img);
//创建p标签
var p=document.createElement('p');
//给P标签添加内容
p.innerHTML=val;
//追加p
li.appendChild(p);
//创建button
var button=document.createElement('button');
button.innerHTML='删除';
//追加button
li.appendChild(button);
//点击button删除
button.onclick=function(){
this.parentElement.parentElement.removeChild(this.parentElement);
}
//追加li
document.querySelector('.main').appendChild(li);
}
</script>
</body>
</html>
