2020-01-20
<!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>
<link rel="stylesheet" href="./demo.css">
</head>
<body>
<div class="wrapper">
<h4 class="header">俊凯</h4>
<div class="content">
<div class="mine">
<img src="./image/5.jpg" alt="">
<div class="text">
今天天气怎么样
</div>
</div>
<div class="robot">
<img src="./image/5.jpg" alt="">
<div class="text">
天气很好呀适合出门呢~~
</div>
</div>
</div>
<div class="inp">
<input type="text" id="word">
<button id="submit">发送</button>
</div>
</div>
<script src="./jquery.js"></script>
<script src="./demo.js"></script>
<script>
</script>
</body>
</html>
* {
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;
}
$('#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 class="${role}">
<img src="./image/${role == 'mine' ? '5.jpg' : '7.jpg'}" alt="">
<div class="text">
${text}
</div>
</div>`).appendTo($(`.content`));
var scrollHeight = $('.content')[0].scrollHeight;
var contentHeight = $('.content')[0].offsetHeight;
$('.content').scrollTop(scrollHeight-contentHeight);
}
