摘要：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>智能在線客服系統(tǒng)作業(yè)</title> <style type=&qu
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>智能在線客服系統(tǒng)作業(yè)</title>
<style type="text/css">
div:nth-child(1){
width:450px;
height:650px;
background-color: lightskyblue;
margin:30px auto;
color:#333;
box-shadow:2px 2px 2px #808080;
border-radius: 20px;
}
h2{
text-align:center;
margin-bottom:-10px;
}
div:nth-child(2){
width:400px;
height:500px;
border:4px double green;
background-color: #efefef;
margin:20px auto 10px;
}
ul{
list-style: none;
line-height:2em;
overflow:hidden;
padding:15px;
}
table{
width:90%;
height:80px;
margin:auto;
}
textarea{
border:none;
resize:none;
background-color:lightyellow;
}
button{
width:60px;
height:40px;
background-color:seagreen;
color:white;
border:none;
}
button:hover{
cursor:pointer;
background-color:orange;
}
</style>
</head>
<body>
<div>
<h2>在線客服系統(tǒng)</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 type="button">發(fā)送</button></td>
</tr>
</table>
</div>
<script>
let btn=document.getElementsByTagName('button')[0];
let text=document.getElementsByName('text')[0];
let list=document.getElementsByTagName('ul')[0];
let sum=0;
btn.onclick=function(){
//獲取用戶提交的內(nèi)容
if(text.value.length===0){
alert('請(qǐng)問(wèn)你是不是忘記輸入內(nèi)容了？')
return flase;
}
let userComment=text.value;
text.value=''
let li=document.createElement('li');
let userPic='<img src="inc/11.jpg" width="30" style="border-radius: 50%">';
li.innerHTML=userPic+' '+userComment;
list.appendChild(li);
sum +=1;
setTimeout(function(){
let info=[
'您好，請(qǐng)問(wèn)有什么可以幫助您？',
'我無(wú)法解決的問(wèn)題您可以撥打我們的客服電話哦！',
'關(guān)于退貨流程你可以參考官網(wǎng)流程。',
'請(qǐng)問(wèn)您需要什么服務(wù)呢？',
'請(qǐng)稍等，我正在為您查閱資料。。。。。。'
];
let temp=info[Math.floor(Math.random()*4)];
let reply=document.createElement('li');
let kefuPic='<img src="inc/22.jpg" width="30" style="border-radius: 50%">';
reply.innerHTML=kefuPic+' '+'<span style="color:red;">'+temp+'</span>';
list.appendChild(reply);
sum +=1;
},2000);
if(sum>10){
list.innerHTML='';
sum=0;
}
}
</script>
</body>
</html>
這個(gè)作業(yè)基本按照課程做的 沒(méi)做什么變化 因?yàn)檎n程學(xué)習(xí)的時(shí)間來(lái)不及了。。。。。。對(duì)于總結(jié)的話 一個(gè)是去隨機(jī)數(shù)調(diào)用語(yǔ)句 稍微想了下 因?yàn)閿?shù)組里5條語(yǔ)句 所以應(yīng)該是[0-4]來(lái)代表 那么通過(guò)Math,random()的值為0-1之間 通過(guò)乘以4 然后用Math.floor向下取整，可以得到0-4的數(shù)字
批改老師：韋小寶批改時(shí)間：2019-02-28 13:26:24
老師總結(jié)：寫(xiě)的沒(méi)毛病 總結(jié)的也是正確的 課后沒(méi)事記得要多去練習(xí)哦!