<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
ul,p{margin:0px;padding:0px;list-style:none;}
input{outline:none;}
#wrap{width:240px;height:460px;margin:30px auto;position:relative;background:url(3.jpg) no-repeat;}
#con{width:200px;height:336px;left:21px;top:52px;position:absolute;overflow:auto;border:1px solid #000;padding-top:6px;}
#con li{width:150px;line-height:20px;margin-bottom:10px;}
#con p{width:117px;border-radius:20px;padding-left:3px;font-size:13px;}
#text{position:absolute;height:20px;width:120px;left:55px;bottom:68px;border-radius:8px;border:1px solid #ccc;}
#bnt{position:absolute;right:18px;bottom:70px;}
#span{width:20px;height:20px;position:absolute;left:25px;bottom:72px;background:red;}
img{width:20px;height:20px;}
.fl{float:left;}
.p1{background:#00d94a;float:left;color:#fff;}
.p2{background:#e5e5ea;float:right;color:#007aff;}
.fr{float:right;}
.img1{float:left;margin-right:10px;}
.img2{float:right;margin-left:10px;}
</style>
<script>
window.function (){
var oImg=document.getElementById("img");
var oBnt=document.getElementById("bnt");//发送按钮
var oUl=document.getElementById("con");//对话框
console.log(oBnt);
var oVal=document.getElementById("text");//用户说的话
//点击img图像的时候 张图片切换
//src 不能作为判断条件
var onOff=true;//没有什么可以解析为true，创建个true
oImg.function(){//2个状态取其一
if(onOff){
oImg.src="2.jpg";//点一下，变这个图片，再点也动不了了，因为写死了，
onOff=false;//怎样让它第二次变回1图片，让其为false,回到一开始判别，是false。则自动执行下面的。
}else{
oImg.src="1.jpg";
onOff=true;//让第三次变回2图片的方式。
}
}
oBnt.function(){
//往ul 发送li li 里面有图片和文字
//获取文字 即用户说的话
var ovalue=oVal.value;
if(onOff){//两个状态取其一，我点的是发送，发送时是哪个图，对应的哪个值。
oUl.innerHTML+="<li class='fl'><img src='1.jpg' class='img1' /><p class='p1'>"+ovalue+"</p></li>"
}else{
oUl.innerHTML+="<li class='fr'><img src='2.jpg' class='img2' /><p class='p2'>"+ovalue+"</p></li>"
}
}
}
</script>
</head>
<body>
<div id="wrap">
<ul id="con">
</ul>
<input type="text" id="text"/>
<input type="button" value="发送" id="bnt" />
<div id="span">
<img src="1.jpg" id="img"/>
</div>
</div>
</body>
</html>
这样好看一些：