サマリー：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> &
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>模擬智能聊天在線客服系統(tǒng)</title>
<link rel="stylesheet" type="text/css" href="font-awesome/css/font-awesome.css">
<style>
div:nth-child(1){
width: 400px;
height: 650px;
background-color: lightblue;
margin:30px auto;
color: #aaa;
box-shadow: 2px 2px 2px #808080;
}
h2{text-align: center;
margin-bottom: -5px;
}
div:nth-child(2){
width:350px;
height: 500px;
margin: 10px auto;
background: #ccc;
border:4px double green;
}
ul{
list-style: none;
padding: 10px;
overflow:hidden;
}
div:nth-child(3){
margin:10px auto;
width: 360px;
height: 100px;
}
p{
margin-top:-2px;
padding: 5px;
}
textarea{
border:none;
padding: 6px;
}
button{
float: right;
margin-right:10px;
padding: 3px;
border:none;
background-color: coral;
border-radius:5px;
}
button:hover{
background-color:orange;
cursor: pointer;
color: #fff;
}
</style>
</head>
<body>
<div>
<h2>在線客服</h2>
<div>
<ul>
<li></li>
</ul>
</div>
<div>
<textarea name="text" cols="52" rows="3"></textarea>
<br>
<p>
<span class="fa fa-smile-o" style="color:#FFA61A;font-size: 15px;"> 表情</span>
<span class="fa fa-picture-o" style="color:#9EC613; font-size: 15px;"> 圖片</span>
<span class="fa fa-video-camera"style="color:#748097; font-size: 15px;"> 視頻</span>
<button>提交</button>
</p>
</div>
</div>
<script>
//獲取頁面中的相關元素
let bt=document.getElementsByTagName('button')[0];
let text=document.getElementsByName('text')[0];
let list=document.getElementsByTagName('ul')[0];
let num=0;
//添加點擊事件，獲取用戶發(fā)送的內(nèi)容并提交窗口
bt.onclick=function(){
if (text.value.length===0){
alert('大官人，是不是忘了說點什么？');
return false;
}
let userContent=text.value;//獲取用戶發(fā)送的信息并保存
text.value='';//清空用戶的輸入框
//創(chuàng)建一個li;
let li=document.createElement('li')
//用戶頭像
let userPic='<img src="images/11.jpg" style="width:25px;border-radius:50%;"/>';
li.innerHTML=userPic+' '+'<span style="color:blue;">'+userContent+'</span>';
list.appendChild(li);//將用戶發(fā)送的信息添加到聊天窗口中
num+=1;
//設置定時器，2秒后自動回復
setTimeout(function(){
let info=[
'我現(xiàn)在沒有時間，稍后回復你！',
'親，你對我的回答還滿意嗎？',
'親，請稍等，你反饋的問題馬上給你解決',
'親，本產(chǎn)品不支持退貨哦',
'親，請確定你的訂單',
'親，該產(chǎn)品不包郵哦'
]
let content=info[Math.floor(Math.random()*5)];
let customer=document.createElement('li');
let customerPic='<img src="images/12.jpg" style="width:25px;border-radius:50%;"/>';
customer.innerHTML=customerPic+' '+'<span style="color:red;">'+content+'</span>';
list.appendChild(customer);
num+=1;
},2000)
//清空窗口并將計時器清零
if(num>10){
list.innerHTML="";
num=0;
}
}
</script>
</body>
</html>
添削の先生：韋小寶添削時間：2019-01-07 09:57:45
先生のまとめ：不錯不錯 寫的有點意思 往后去后端語言學習了以后可以嘗試著去實現(xiàn)真實的聊天哦