摘要：<html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, i
<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>智能在線客服</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<style>
* {
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;
}
</style>
<body>
<div class="box">
<h2>在線客服</h2>
<hr>
<div class="count">
<ul class="list">
<li class="end"></li>
</ul>
</div>
<div class="input">
<textarea name="" id="txt" cols="30" rows="10"></textarea>
<button class="btn">提交</button>
</div>
</div>
<script>
(function () {
var oTxt = document.getElementById('txt'),
oUl = document.getElementsByClassName('list')[0],
oBtn = document.getElementsByClassName('btn')[0];
var person = true;
oBtn.onclick = function () {
Assembly(person); //此方法內(nèi)必然是用戶行為
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) { //延遲語句可以根據(jù)回應的文字數(shù)量，利用公式算出大概的輸入時間，然后靈活延后
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'); //系統(tǒng)回話完畢必然成為已讀信息，添加讀取完的識別class
} else {
var n = "快速轉接人工客服"; //數(shù)據(jù)庫無匹配應操作的行為
}
}
}
}
function Assembly(obj, st) { //組裝
var str = oTxt.value.replace(/(^\s*)|(\s*$)/g, ""); //去空格
if (st) {
str = st; //檢查是否有第二個指定參數(shù)
}
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 = `<img src="${imgSrc}">`;
Li.appendChild(Div);
Li.innerHTML += `<p>${str}</p>`;
oUl.appendChild(Li);
}
}
var arr = {
"在么？": ["在的呢，親！","有什么可以幫助您的么？", ["還在么，親？", "還有什么問題么，親？"]],
"在嗎？": ["在的呢，親！","有什么可以幫助您的么？", ["還在么，親？", "還有什么問題么，親？"]],
"有人么？": ["有的"],
"你是真人么？": ["當然是真人。。。"],
}
})();
</script>
</body>
</html>
批改老師：查無此人批改時間：2019-04-19 09:36:17
老師總結：完成的不錯。我第一次見彩色字體，厲害了。繼續(xù)加油。