摘要：<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>智能在线客服系统作业</title> <style type="text/css">di
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>智能在线客服系统作业</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>在线客服系统</h2>
<div>
<ul>
<li></li>
</ul>
</div>
<table>
<tr>
<td><textarea name="text" cols="50" rows="4"></textarea></td>
<td><button type="button">发送</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(){
//获取用户提交的内容
if(text.value.length===0){
alert('请问你是不是忘记输入内容了？')
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=[
'您好，请问有什么可以帮助您？',
'我无法解决的问题您可以拨打我们的客服电话哦！',
'关于退货流程你可以参考官网流程。',
'请问您需要什么服务呢？',
'请稍等，我正在为您查阅资料。。。。。。'
];
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>
这个作业基本按照课程做的 没做什么变化 因为课程学习的时间来不及了。。。。。。对于总结的话 一个是去随机数调用语句 稍微想了下 因为数组里5条语句 所以应该是[0-4]来代表 那么通过Math,random()的值为0-1之间 通过乘以4 然后用Math.floor向下取整，可以得到0-4的数字
批改老师：韦小宝批改时间：2019-02-28 13:26:35
老师总结：两次作业内容都是一样的 写的没毛病 总结的也是正确的 课后没事记得要多去练习哦!
