<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<title>online service</title>
<style>
* {
padding: 0;
margin: 0;
}
.box {
width: 750px;
height: 650px;
box-shadow: 0 0 10px #CCC;
margin: 20px auto;
}
/*聊天框头部*/
.title {
height: 100px;
background: rgb(250, 250, 250);
}
.title img {
width: 65px;
height: 65px;
border-radius: 50%;
margin: 17px 10px 0 20px;
float: left;
}
.name {
float: left;
margin-top: 25px;
}
#name {
font-size: 20px;
margin-bottom: 0;
}
#status {
color: red;
margin-top: 0;
}
/*聊天框区域*/
.chat {
height: 350px;
overflow-y: auto;
}
.chat ul {
list-style: none;
padding: 0 20px;
overflow: hidden;
}
.chat ul li {
width: 100%;
float: left;
margin: 15px 0;
overflow: hidden;
}
.chat img {
width: 50px;
height: 50px;
border-radius: 50%;
}
.time {
color: #999;
margin-bottom: 5px;
}
.text {
font-size: 18px;
color: #FFF;
background: rgb(95, 184, 120);
padding: 10px;
border-radius: 5px;
display: inline-block;
}
.other img {
float: left;
}
.other .content {
max-width: 610px;
float: left;
margin: 8px 0 0 20px;
}
.me img {
float: right;
}
.me .content {
max-width: 610px;
float: right;
margin: 8px 20px 0 0;
text-align: right;
}
.me .text {
color: #333;
background: rgb(250, 250, 250);
}
/*输入框*/
.enter {
height: 200px;
border-top: 1px solid #EEE;
position: relative;
}
.enter textarea {
width: 720px;
height: 100px;
padding: 15px;
font-size: 18px;
border: none;
outline: none;
resize: none;
}
.enter button {
width: 100px;
height: 40px;
color: #FFF;
font-size: 18px;
background: rgb(30, 184, 80);
border: none;
margin-top: 15px;
position: absolute;
right: 20px;
}
.enter button:hover {
cursor: pointer;
background: rgb(95, 184, 120);
}
</style>
</head>
<body>
<div class = "box">
<div class = "title">
<img src = "https://tva1.sinaimg.cn/crop.0.23.1242.1242.180/8693225ajw8fbimjimpjwj20yi0zs77l.jpg">
<div class = "name">
<p id = "name">VIP客服子晴</p>
<p id = "status">在线</p>
</div>
</div>
<div class = "chat">
<ul>
<li class = "other">
<img src = "https://tva1.sinaimg.cn/crop.0.23.1242.1242.180/8693225ajw8fbimjimpjwj20yi0zs77l.jpg">
<div class = "content">
<p class = "time first"></p>
<p class = "text">你好！有什么问题欢迎咨询哦~</p>
</div>
</li>
<!--
<li class = "me">
<img src = "https://tva1.sinaimg.cn/crop.0.0.180.180.180/7fde8b93jw1e8qgp5bmzyj2050050aa8.jpg">
<div class = "content">
<p class = "time">2019-02-12 20:46:03</p>
<p class = "text">请问，VIP怎么开通？请问，VIP怎么开通？请问，VIP怎么开通？请问，VIP怎么开通？请问，VIP怎么开通？请问，VIP怎么开通？</p>
</div>
</li>
-->
</ul>
</div>
<div class = "enter">
<textarea></textarea>
<div class = "btn">
<button type = "button">发送</button>
</div>
</div>
</div>
</body>
<script>
let textarea = document.getElementsByTagName('textarea')[0];
let btn = document.getElementsByTagName('button')[0];
let ul = document.getElementsByTagName('ul')[0];
window.onload = function () {
let time = new Date().toLocaleString();
let p = document.getElementsByClassName('first')[0];
p.innerHTML = time;
};
btn.onclick = function () {
let word = textarea.value.trim(); //点击时，实时获取输入框内容
if (word === '') {
alert('输入的信息为空，请重新输入');
return false;
}
let time = new Date().toLocaleString(); //获取时间
// li标签的内容
let liSrc = '<img src = "https://tva1.sinaimg.cn/crop.0.0.180.180.180/7fde8b93jw1e8qgp5bmzyj2050050aa8.jpg">\n' +
'<div class = "content">\n' +
'<p class = "time">' + time + '</p>\n' +
'<p class = "text">' + word + '</p>\n' +
'</div>';
let li = document.createElement('li');
li.setAttribute('class', 'me');
li.innerHTML = liSrc;
// console.log(li);
// 清除输入框
textarea.value = '';
// 自动回复内容
let info = [
'你好，请问有什么可以帮您？',
'VIP客服是24小时在线服务哦~',
'每天只需要1元钱，就可以成为VIP啦',
'你辣么帅，一定是VIP哦',
'爸爸，你好~',
'你说的什么，我不懂哦',
'好的，没有问题哦',
'再见~欢迎下次光临~'
];
let index = Math.ceil((Math.random() * 7));
let liSrc2 = '<img src = "https://tva1.sinaimg.cn/crop.0.23.1242.1242.180/8693225ajw8fbimjimpjwj20yi0zs77l.jpg">\n' +
'<div class = "content">\n' +
'<p class = "time">' + time + '</p>\n' +
'<p class = "text">' + info[index] + '</p>\n' +
'</div>';
li2 = document.createElement('li');
li2.setAttribute('class', 'other');
li2.innerHTML = liSrc2;
// 获得的li插入ul底部
ul.appendChild(li);
ul.appendChild(li2);
// 显示滚动条底部的内容，即显示最新的消息
let chat = document.getElementsByClassName('chat')[0];
chat.scrollTop = chat.scrollHeight;
console.log(chat.scrollHeight);
};
</script>
</html>
