<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <link href="https://www.jb51.net/article/demo.css" > </head> <body> <div> <h4>俊凯</h4> <div> <div> <img src="https://www.jb51.net/article/image/5.jpg" alt=""> <div> 今天天气怎么样 </div> </div> <div> <img src="https://www.jb51.net/article/image/5.jpg" alt=""> <div> 天气很好呀适合出门呢~~ </div> </div> </div> <div> <input type="text"> <button>发送</button> </div> </div> <script src="https://www.jb51.net/article/jquery.js"></script> <script src="https://www.jb51.net/article/demo.js"></script> <script> </script> </body> </html>
CSS:
* { padding: 0; margin: 0; } ::-webkit-scrollbar { width: 0px; } html, body { height: 100%; } .wrapper { width: 600px; margin: 0 auto; border: 1px solid #eee; height: 100%; position: relative; background-color: #eee; /* overflow: hidden; */ } .wrapper .content { /* overflow-x: hidden; overflow-y: scroll; */ overflow: auto; height: calc(100% - 110px); line-height: 30px; padding: 10px; } .wrapper .header { background-color: grey; text-align: center; color: #fff; height: 40px; line-height: 40px; font-weight: 700; } .wrapper .content .mine { float: right; width: 400px; } .wrapper .content .robot { float: left; width: 400px; } .wrapper .content img { width: 30px; height: 30px; border-radius: 50%; vertical-align: middle; } .content .mine img { float: right; } .content .mine .text { float: right; background-color: greenyellow; } .content .robot img { float: left; } .content .robot .text { float: left; background-color: #fff; } .text { max-width: 250px; font-size: 16px; padding: 0 10px; border-radius: 3px; /* border: 1px solid #fff; */ } .inp { width: 100%; height: 50px; line-height: 50px; position: absolute; bottom: 0px; font-size: 0; text-align: center; /* padding: 0 10px; */ background-color: #ddd; /* vertical-align: middle; */ } .inp input { width: calc(100% - 80px); height: 30px; line-height: 30px; border: none; outline: none; font-size: 14px; display: inline-block; vertical-align: middle; } .inp button { width: 60px; height: 30px; font-size: 14px; border: none; outline: none; background-color: #ccc; display: inline-block; vertical-align: middle; cursor: pointer; }
js：
$('#submit').click(function(){ var val = $('#word').val(); if(val){ renderDom('mine',val) $('#word').val('') $.ajax({ type:'GET', url:'http://temp.duyiedu.com/api/chat', data:{ text:val }, dataType:'json', success:function(res){ // console.log(res) renderDom('robot',res.text); } }) } }) $('#word').on('keyup',function (e){ if(e.keyCode == 13){ $('#submit').click() } }) function renderDom(role,text){ $(` <div> <img src="./image/${role == 'mine' ? '5.jpg' : '7.jpg'}" alt=""> <div> ${text} </div> </div>`).appendTo($(`.content`)); var scrollHeight = $('.content')[0].scrollHeight; var contentHeight = $('.content')[0].offsetHeight; $('.content').scrollTop(scrollHeight-contentHeight); }