效果图如下：
HTML代码如下：
<!DOCTYPE html><html lang="en"><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 type="text/css"> ???????.talk_con{ ???????????width:600px; ???????????height:500px; ???????????border:1px solid #666; ???????????margin:50px auto 0; ???????????background:#f9f9f9; ???????} ???????.talk_show{ ???????????width:580px; ???????????height:420px; ???????????border:1px solid #666; ???????????background:#fff; ???????????margin:10px auto 0; ???????????overflow:auto; ???????} ???????.talk_input{ ???????????width:580px; ???????????margin:10px auto 0; ???????} ???????.whotalk{ ???????????width:80px; ???????????height:30px; ???????????float:left; ???????????outline:none; ???????} ???????.talk_word{ ???????????width:420px; ???????????height:26px; ???????????padding:0px; ???????????float:left; ???????????margin-left:10px; ???????????outline:none; ???????????text-indent:10px; ???????} ???????????????.talk_sub{ ???????????width:56px; ???????????height:30px; ???????????float:left; ???????????margin-left:10px; ???????} ???????.atalk{ ??????????margin:10px; ????????} ???????.atalk span{ ???????????display:inline-block; ???????????background:#0181cc; ???????????border-radius:10px; ???????????color:#fff; ???????????padding:5px 10px; ???????} ???????.btalk{ ???????????margin:10px; ???????????text-align:right; ???????} ???????.btalk span{ ???????????display:inline-block; ???????????background:#ef8201; ???????????border-radius:10px; ???????????color:#fff; ???????????padding:5px 10px; ???????} ???</style> ???<script src="js/jquery-1.12.4.min.js"></script> ???<script type="text/javascript"> ?????????// 写出对应功能代码 ?????$(function(){ ???????// 发送按钮单击，获取用户输入的数据，显示到上面的区域 ???????var $talksub = $(‘#talksub‘) ???????var $words = $(‘#words‘) ???????$talksub.click(function(){ ???????????var vals = $(‘#talkwords‘).val() ???????????alert(vals) ???????????// 如果是a说 value==0，就显示a的样式的文字 ???????????var whoVal = $(‘#who‘).val() ???????????var str = ‘‘ ???????????if(vals == ‘‘) ???????????{ ???????????????alert(‘请输入内容‘) ???????????????return ???????????} ???????????if(whoVal ==0) ???????????{ ???????????????str = ‘<div class="atalk"><span>A说：‘+vals+‘</span></div>‘ ???????????} ???????????else ???????????{ ???????????????str = ‘<div class="btalk"><span>B说：‘+vals+‘</span></div>‘ ???????????} ???????????// 原有内容的基础上加上 str ???????????$words.html( $words.html() + str ) ???????}) ???}) ???</script></head><body> ???<div class="talk_con"> ???????<div class="talk_show" id="words"> ???????????<div class="atalk"><span>A说：吃饭了吗？</span></div> ???????????<div class="btalk"><span>B说：还没呢，你呢？</span></div> ???????</div> ???????<div class="talk_input"> ???????????<select class="whotalk" id="who"> ???????????????<option value="0">A说：</option> ???????????????<option value="1">B说：</option> ???????????</select> ???????????<input type="text" class="talk_word" id="talkwords"> ???????????<input type="button" value="发送" class="talk_sub" id="talksub"> ???????</div> ???</div></body></html>
JQuery实现聊天对话框
原文地址：https://www.cnblogs.com/wf-skylark/p/9157519.html