思路分析： 1)点击图片实现用户切换功能 2）点击发送按钮，八用户得聊天内容展示聊天区域 <!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>微信聊天界面</title><style>*{padding: 0px;margin: 0px;}#container{width:450px;height:600px;background: #eee;margin: 10px auto 0;position: relative;box-shadow: 0 0 16px #999;}.header{height: 34px;background: #000;color: #fff;line-height: 34px;font-size: 20px;padding: 0 10px;}.footer{width: 430px;height: 40px;background: #999;position: absolute;bottom: 0px;padding: 10px;}.footer input{width: 300px;height: 38px;outline: none;font-size: 16px;text-indent: 10px;position: absolute;border-radius: 6px;right: 80px;}.footer span{display: inline-block;width: 62px;height: 38px;background: #ccc;font-weight: 900;line-height: 38px;cursor: pointer;text-align: center;position: absolute;right: 10px;top: 14px;border-radius: 6px;}.footer span:hover{color: #777;background: #ddd;}.icon{display: inline-block;background: red;width: 50px;height: 50px;border-radius: 30px;position: absolute;bottom: 3px;left:10px;cursor: pointer;overflow: hidden;}img{width: 60px;height: 60px;border-radius: 8px;}.content{font-size: 20px;width: 435px;height: 662px;overflow: auto;padding: 5px;}/* 内容--------------*/.content li {margin-top: 10px;padding-left: 10px;width: 412px;display: block;/*清除浮动*/clear: both;overflow: hidden;}/*内容部分主要是用li1、图片切换人物2、内容每一行用li li就是每个人得图像和聊天内容 img图像 span是聊天内容3、下面得图像时当前得人，点击切换4、下面内容输入点击发送后，到内容，图像和内容5、两个人物两个背景色*/.content li img {float: left;}/*聊天内容*/.content li span {background: #7cfc00;padding: 10px;border-radius: 10px;float: left;margin: 6px 10px 0 10px;max-width: 310px;border: 1px solid #ccc;box-shadow: 0 0 3px #ccc;}.content li img.imgleft {float: left;}.content li img.imgright {float: right;}.content li span.spanleft {float: left;background: #fff;}.content li span.spanright {float: right;background: #7cfc00;}</style>
</head>
<body>
<!--1、大的盒子--><div id="container">
<!-- ---------------------------------- 2、头部--------------------------------------------------------------><div class="header"> <span style="float: right;">20:30</span> <span style="float: left;">小泽老师</span> </div>
<!----------------------------------------3、内容----------------------------------------------------------><ul class="content"></ul>
<!-------------------------------------------4、底部-----------------------------------------------------><div class="footer"><div class="icon"> <img src="images/1.png" alt="" id="icon"> </div><input id="text" type="text" placeholder="说点什么吧..."> <span id="btn">发送</span> </div></div>
<script>
/*思路分析：1)点击图片实现用户切换功能1-1：默认两个用户，通过点击来回切换2）点击发送按钮，八用户得聊天内容展示聊天区域2-1、点击发送按钮，把聊天内容展示在聊天区域2-2、设定聊天在领土区域内不同位置显示
*/
//首先点击图片切换图片var img =document.getElementById('icon');
// 数组存储了两个用户得路径var arr=['images/1.png','images/2.png'];
// 标识符falg=0表示图像1 =1表示图像2var flag=0;
// 实现功能切换图像img.onclick=function () {if(flag==0){img.src=arr[1];flag=1;}else {img.src=arr[0];flag=0;}}
// 实现功能发送消息var btn=document.getElementById('btn');var num=-1;//聊天统计条数btn.onclick=function () {// 判断聊天内容是否为空var text=document.getElementById('text').value;if(text===''){alert('聊天记录不能为空');}else {// 把用户内容添加到内容区域var content=document.getElementsByTagName('ul')[0];//需要好好理解content.innerHTML+="<li><img src='"+arr[flag]+"'/><span>"+text+"</span></li>";}var imgs=content.getElementsByTagName('img');var span=content.getElementsByTagName('span');num++;if(flag==0){imgs[num].className='imgleft';span[num].className='spanleft';}else {imgs[num].className='imgright';span[num].className='spanright';}//清空聊天记录document.getElementById('text').value="";}
</script>
</body>
</html>
