实现效果：
直接上代码：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>PC机器人聊天界面</title>
<style>
.box{width: 100%;height: 500px;position:absolute;top:0;
}
#content{width: 98%;height: 500px;margin-right:1%;margin-left:1%;
}
form{width: 100%;height:60px;line-height:40px;border-top:1px solid #ccc; position:absolute;bottom:0;left:0;
}
#content form img{border:1px solid #ccc;border-radius:7px;padding:2px; cursor:pointer;margin:5px 0 0 5px;float:left;width:40px;height:40px;
}
#content form input[type='text']{width:80%;height:40px;line-height:27px;border-radius:7px; border:1px solid #ccc;float:left;margin-left:5px; margin-top:5px; outline:none;padding:0 5px;
}
#content form input[type='button']{width:12%;height: 40px;border-radius:5px; background:#fff;border:none;margin-left:1%; cursor:pointer;font-size:27px;margin-top:5px;
}.info_box{width: 100%;height:440px;overflow-y:auto;
}
.info_box::-webkit-scrollbar {display:none}
.info_box div{margin:0 0 5px;position:relative;
}
.info_box .info_r{}
.info_box .info_l{}
.info_box .info_l img{position:absolute;left:0;top:0;
}
.info_box .info_r img{position:absolute;right:0;top:0;
}
.info_box .info_l span{margin-left: 60px;margin-top:16px;}
.info_box .info_r span{margin-left:28%;margin-top:16px;}.info_box span{width: 66%;height: auto;font-size:14px;background:#ddd;border-radius: 10px;padding:8px; color:#333;display: block;position:relative;top:0;
}.info_box .info_l img{float:left;width:50px;height:50px;
}.info_r img{float:right;width:50px;height:50px;
}</style>
</head>
<body>
<div class="box"><div id="content"><div class="info_box"><div class="info_r"><img src="img/2.jpg" class='pic_r'><span class='infor'>Python是一种跨平台的计算机程序设计语言。是一种面向对象的动态类型语言，最初被设计用于编写自动化脚本(shell)，随着版本的不断更新和语言新功能的添加，越来越多被用于独立的、大型项目的开发。</span></div> <div class="info_l"><img src="img/1.jpg" class='pic_l'><span class='infoo'>在您开始之前，在你的计算机将需要Python，但您可能不需要下载它。首先检查(在命令行窗口输入python)有没有安装Python!如果你看到了一个Python解释器的响应，那么就能在它的显示窗口中得到一个版本号。通常较新的版本都可以做到Python的向前兼容。</span></div> </div><form action=""><img src="img/1.jpg" id='pic'><input type="text" placeholder='尽情畅聊吧' id='inp'><input type="button" value='发送' id='send'></form></div>
</div><script>
var send =document.getElementById('send');
var pic =document.getElementById('pic');
var txt =document.getElementById('inp');
var info_box = document.getElementsByClassName('info_box')[0];var onoff=true;
pic.onclick=function(){if(onoff){pic.src='img/2.jpg';onoff=false;}else{pic.src='img/1.jpg';onoff=true;}
};send.onclick=function(){if(txt.value===''){alert('请输入内容');}else{var nDiv = document.createElement('div');var spans = document.createElement('span');var imgs = document.createElement('img');var sTxt = document.createTextNode(txt.value);var info_box = document.getElementsByClassName('info_box')[0];spans.appendChild(sTxt);nDiv.appendChild(spans);nDiv.appendChild(imgs);// nDiv.style.display='block';info_box.insertBefore(nDiv,info_box.lastChild);spans.className='infor';nDiv.className='info_r';imgs.src='img/2.jpg';var nDiv = document.createElement('div');var spans = document.createElement('span');var imgs = document.createElement('img');var sTxt = document.createTextNode("你说啥？");var info_box = document.getElementsByClassName('info_box')[0];spans.appendChild(sTxt);nDiv.appendChild(spans);nDiv.appendChild(imgs);// nDiv.style.display='block';info_box.insertBefore(nDiv,info_box.lastChild);spans.className='infol';nDiv.className='info_l';imgs.src='img/1.jpg';
/*if(onoff==true){spans.className='infor';nDiv.className='info_r';imgs.src='img/2.png';}if(onoff==false){spans.className='infol';nDiv.className='info_l';imgs.src='img/1.png';}
*/}txt.value='';
}</script></body>
</html>
