摘要：

智能在线客服

* {

margin: 0;

padding: 0;

}

body {

font-family: "微软雅黑";

color: #333;

}

.box {

width: 500px;

height: 700px;

background: #e9eff8;

margin: 40px auto;

}

h2 {

text-align: center;

line-height: 40px;

}

.count {

width: 96%;

height: 75%;

margin: 0 auto;

}

.count ul {

height: 100%;

padding-top: 10px;

}

.count ul li {

list-style: none;

overflow: auto;

margin-bottom: 6px;

}

.count ul li div {

width: 40px;

height: 40px;

border-radius: 40px;

overflow: hidden;

}

.count ul li div img {

width: 100%;

height: 100%;

}

.count ul li p {

max-width: 60%;

margin: 0 10px;

padding: 10px;

overflow: hidden;

word-wrap: break-word;

word-break: break-all;

background: #d2d7de;

border-radius: 10px;

}

.myself div,

.myself p {

float: right;

}

.service div,

.service p {

float: left;

}

.input {

width: 100%;

height: 18%;

border-top: solid 1px #666;

position: relative;

}

textarea {

display: block;

width: 100%;

height: 100%;

background: #e9eff8;

outline: none;

font-size: 18px;

padding: 8px 2%;

border: none;

resize: none;

}

button {

width: 78px;

height: 34px;

background: #94b9ea;

border-radius: 6px;

border: none;

outline: none;

position: absolute;

right: 12px;

bottom: 6px;

font-size: 18px;

font-family: "微软雅黑";

line-height: 34px;

cursor: pointer;

}

button:hover {

background: #649be5;

color: #fff;

}

(function () {

var oTxt = document.getElementById('txt'),

oUl = document.getElementsByClassName('list')[0],

oBtn = document.getElementsByClassName('btn')[0];

var person = true;

oBtn.onclick = function () {

Assembly(person); //此方法内必然是用户行为

oTxt.value = '';

var aTxt = $('li[class!="service"][class!="end"]'); //除去带有这两个class的列表

for (var i = 0; i < aTxt.length; i++) {

var arrSe = [];

arrSe[i] = $(aTxt[i]).children("p:eq(0)").text(); //取得用户输入信息

}

for (const key in arr) {

for (var j = 0; j < arrSe.length; j++) {

if (arrSe[j] == key) { //延迟语句可以根据回应的文字数量，利用公式算出大概的输入时间，然后灵活延后

var setInt = setTimeout(function () {

Assembly(false, arr[key][0]); //初始回应

setTimeout(function(){

Assembly(false, arr[key][1]);

},5000) //延后的第二句话

}, 3000) //两秒延迟

$('li[class!="service"][class!="end"]').addClass('end'); //系统回话完毕必然成为已读信息，添加读取完的识别class

} else {

var n = "快速转接人工客服"; //数据库无匹配应操作的行为

}

}

}

}

function Assembly(obj, st) { //组装

var str = oTxt.value.replace(/(^\s*)|(\s*$)/g, ""); //去空格

if (st) {

str = st; //检查是否有第二个指定参数

}

if (str) {

var Li = document.createElement('li');

if (obj) { //用户

Li.classList.add('myself');

var imgSrc = "http://img3.imgtn.bdimg.com/it/u=751773258,2942913351&fm=26&gp=0.jpg";

} else {  //客服

Li.classList.add('service');

var imgSrc = "http://img1.imgtn.bdimg.com/it/u=299867477,668455490&fm=26&gp=0.jpg";

}

var Div = document.createElement('div');

Div.innerHTML = ``;

Li.appendChild(Div);

Li.innerHTML += `

${str}

`;

oUl.appendChild(Li);

}

}

var arr = {

"在么？": ["在的呢，亲！","有什么可以帮助您的么？", ["还在么，亲？", "还有什么问题么，亲？"]],

"在吗？": ["在的呢，亲！","有什么可以帮助您的么？", ["还在么，亲？", "还有什么问题么，亲？"]],

"有人么？": ["有的"],

"你是真人么？": ["当然是真人。。。"],

}

})();

批改老师：欧阳批改时间：2019-04-19 09:36:17

老师总结：完成的不错。我第一次见彩色字体，厉害了。继续加油。