摘要：智能在線客服實戰(zhàn)案例代碼：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>DOM實戰(zhàn)：模擬只能在線客服系統(tǒng)</title>
智能在線客服實戰(zhàn)案例代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>DOM實戰(zhàn)：模擬只能在線客服系統(tǒng)</title>
<style>
div:nth-child(1){
width: 450px;
height: 650px;
background-color: #f0c674;
margin: 10px auto;
color: #ff5500;
box-shadow: 2px 2px 2px #cccccc;
border-radius: 15px;
}
h2 {
text-align: center;
padding-top: 10px;
}
img {
width: 30px;
padding-left: 10px;
position: relative;
top: 5px;
}
div:nth-child(2){
width: 400px;
height: 490px;
background-color: ghostwhite;
margin: 10px auto;
border-radius: 10px;
border: 2px double #3C3C3C;
}
table {
margin: 10px auto;
}
textarea {
width: 300px;
margin-right: 15px;
/*border: none;*/
/*不可以調整*/
resize: none;
border-radius: 5px;
background-color: lavenderblush;
}
button {
border: none;
width: 75px;
height: 50px;
background-color: #ff5500;
box-shadow: 2px 2px 2px #3C3C3C;
border-radius: 10px;
color: white;
font-size: 1.5em;
font-family: 楷體;
}
button:hover{
/*鼠標變成手*/
cursor: pointer;
background-color: lightgreen;
}
ul {
list-style: none;
line-height: 2em;
/*overflow 屬性規(guī)定當內容溢出元素框時發(fā)生的事情。*/
/*hidden 內容會被修剪，并且其余內容是不可見的。*/
overflow: hidden;
padding: 15px;
}
</style>
</head>
<body>
<div>
<h2>在線客服<img src="static/images/kf.jpg"></h2>
<div>
<ul>
<li></li>
</ul>
</div>
<table>
<tr>
<td align="right"><textarea name="text" cols="50" rows="4"></textarea></td>
<td align="left"><button>提交</button></td>
</tr>
</table>
</div>
<script>
//獲取到頁面中的相關元素
let btn = document.getElementsByTagName('button').item(0)
console.log(btn);
let text = document.getElementsByName('text').item(0)
console.log(text);
let list = document.getElementsByTagName('ul').item(0)
console.log(list);
let num = 0;//計數器，用于滿10條內容后清空列表
//添加點擊事件，獲取用戶的信息，并發(fā)送到聊天窗口
btn.onclick = function () {
let info = text.value;
if(info.length === 0){
alert('客官，你還沒有輸入哦！')
return false;
}
// console.log(info);
text.value = '';
let li = document.createElement('li');
li.innerHTML = '<img src="static/images/wd.jpg" style="border-radius: 50%"> : '+'<span style="color: black">' + info + '</span>';
list.appendChild(li);
num += 1;
//設置一個定時器，2秒鐘以后回復
setTimeout(function () {
//定義一個自動回復的模板
let reply = [
'你好，請問有什么需要幫助嗎？',
'什么意思，能詳細描述一下嗎？',
'可以的，那就說定了',
'你到底在說什么？sb',
'你的問題好難哦，我不知道'
];
let temp = reply[Math.floor(Math.random()*4)];
let kefu = document.createElement('li');
kefu.innerHTML = '<img src="static/images/kf.jpg" style="border-radius: 50%"> : '+temp;
list.appendChild(kefu);
num += 1;
text.focus();
},2000);
//清空窗口，并且把計數器清零
if(num > 10){
list.innerHTML = '';
num = 0;
}
}
</script>
</body>
</html>運行截圖：
實戰(zhàn)操作中遇到的兩個小問題：
1、提交按鈕點擊后，會出現(xiàn)一個邊框，如何去掉
2、我設置的頭像的圓角是50%，為什么會是橢圓的
批改老師：天蓬老師批改時間：2019-07-01 17:42:48
老師總結：樣式寫得不錯, 業(yè)務邏輯基本正確 , 其實這個案例, 還存在大量可以優(yōu)化的地方, 想想看