<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>QQ聊天框</title> <link rel="stylesheet" href="css/mycss.css"/> </head> <body> <section> <div> <div id="showArea"> </div> <p><img src="images/icon.jpg" alt=""/></p> <form action="" method="post"> <textarea name="" id="talkArea"></textarea> <p> <input type="button" value="关闭(C)"/> <input type="button" id="send" value="发送(S)"/> </p> </form> </div> </section> </body> <script src="js/jquery-1.12.4.js"></script> <script src="js/myjs.js"></script> </html>
下面是css样式
*{ margin: 0px; padding: 0px; font-size: 12px; line-height: 22px; } li,ul{ list-style: none; } section{ width: 436px; border: 1px solid #666666; margin: 0px auto; } section div #showArea{ width: 100%; height: 240px; overflow:auto; } section div textarea{ width: 100%; height: 80px; border: none; margin-bottom: 30px; } section div form{ position: relative; } section div form p{ position: absolute; right: 5px; bottom: 5px; } section div form input{ padding:3px 10px; font-size: 12px; color: white; border: none; border-radius: 10px; background: #3D85D2; } section section:after{ content: ""; display: block; clear: both; } section section{ width: 400px; margin: 5px 0px; border: none; } section section div{ float: left; } section section div:last-of-type{ margin-left: 10px; width: 320px; } section section div:last-of-type p:last-of-type{ line-height: 30px; padding: 0px 10px; background: #eeeeee; border-radius: 5px; }
最后jQuery代码
/** * Created by niu on 2017/10/18. */ $(document).ready(function () { var paths = new Array("images/head01.jpg", "images/head02.jpg", "images/head03.jpg");//图片路径数组 var names = new Array("灿若星辰", "辰逸致远", "牛牛");//名称数组 $("#send").click(function () { if ($("#talkArea").val().length > 0) { var chat = $("#showArea").html();//获取原始的聊天记录 var num = Math.floor(Math.random() * 3);//计算随机数 var path = "<div><img src=" + paths[num] + "/></div>";//获取头像 var str = $("#talkArea").val();//获取聊天内容 var nameTalk = "<div><p>" + names[num] + "</p><p>" + str + "</p></div>";//获取聊天名并添加 var currentStr = "<section>" + path + nameTalk + "</section>";//聊天信息 $("#showArea").html(chat + currentStr);//添加聊天记录 $("#talkArea").val("");//清空聊天框 } }); });
效果图
