<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
ul{
list-style: none;
}
img{
vertical-align: top;
}
.wrap{
width: 1000px;
height: 800px;
background: url(img/bg.jpg) no-repeat;
position: absolute;
left: 50%;
top: 50%;
margin-top: -400px;
margin-left: -500px;
}
.iphone{
width: 356px;
height: 679px;
background: url(img/iphone.png) no-repeat;
position: absolute;
left: 50%;
top: 50%;
margin-left: -178px;
margin-top: -338.5px;
}
.list{
width: 318px;
height: 498px;
margin: 47px 0 0 19px;
padding: 20px;
overflow: auto;
box-sizing: border-box;
}
.list li::after{
content: '';
display: block;
clear: both;
}
.list img{
width: 35px;
height: 40px;
}
.list p{
width: 230px;
box-sizing: border-box;
padding: 10px;
border-radius: 10px;
}
.nav{
height: 60px;
background: #e5e5e5;
width: 318px;
margin-left:19px;
}
.nav::after{
content: '';
display: block;
clear: both;
}
.nav img{
padding: 10px 0 0 16px;
float: left;
}
.nav input{
float: left;
width: 190px;
height: 40px;
border: none;
background: #fff;
border-radius: 10px;
margin: 11px 0 0 13px;
}
.nav button{
width: 64px;
height: 40px;
font: 16px / 40px "微软雅黑";
color: #e15671;
margin-top: 11px;
text-align: center;
border: none;
background: none;
}
.right,.left{
margin-bottom: 20px;
}
.right img{
float: right;
}
.right p{
float: right;
background: #bab3ce;
color: #fff;
margin-right: 13px;
}
.left img{
float: left;
}
.left p{
float: left;
background: #e5e5e5;
margin-left: 13px;
}
</style>
</head>
<body>
<div class="wrap">
<div class="iphone">
<ul class="list">
<li class="right">
<img src="img/monster2.png" alt="">
<p>说：哈？好呀，多少钱我都愿意～～呵呵</p>
</li>
<li class="left">
<img src="img/monster.png" alt="">
<p>说：这个简单，我们去妙味远程课堂学就行啦～～～</p>
</li>
<!-- <li class="right">
<img src="img/monster2.png" alt="">
<p>说：好呀～～～你先帮我学会JS再说～～</p>
</li>
<li class="left">
<img src="img/monster.png" alt="">
<p>说：咦？土豪？？</p>
</li>
<li class="right">
<img src="img/monster2.png" alt="">
<p>说：大家好，我是土豪～</p>
</li> -->
</ul>
<div class="nav">
<img id="pic" src="img/monster2.png" alt="">
<input id="txt" type="text">
<button id="btn">发送</button>
</div>
</div>
</div>
<script>
/*
切换发送的头像
1-获取头像的图片的元素
2-绑定点击事件
3-切换图片的src（注意需要判断，应该是哪个图片）
*/
var pic = document.getElementById('pic');
var onOff = true;
pic.onclick = function(){
if(onOff){
pic.src = 'img/monster.png';
onOff = false;
}else{
pic.src = 'img/monster2.png';
onOff = true;
}
};
/*
添加内容进ul
1-获取元素（按钮、头像、文字、list）
2-给按钮绑定点击时间
3-获取头像地址，以及文字内容（如果内容为空不允许发送）
4-扔到list里面去
*/
var btn = document.getElementById('btn');
var txt = document.getElementById('txt');
var list = document.querySelector('.list');
btn.onclick = function(){
var value = txt.value;
if(value == ''){
alert('内容为空，不允许发送');
}else{
if(onOff){
list.innerHTML = '<li class="left"><img src="img/monster2.png" alt=""><p>'+value+'</p></li>' + list.innerHTML;
}else{
list.innerHTML = '<li class="right"><img src="img/monster.png" alt=""><p>'+value+'</p></li>' + list.innerHTML;
}
}
};
</script>
</body>
