abstract：怎么没有样式了呢，全乱掉了。 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>模拟在线客服系统</title> <style type="text/css"> h2{font
怎么没有样式了呢，全乱掉了。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>模拟在线客服系统</title>
<style type="text/css">
h2{font-weight:300;color:#636363;padding:10px 0 10px;height:30px;line-height:30px;text-align:center;}
.service{width:480px;height:600px;background:#f7f7f7;margin:20px auto 10px; border:1px double #fd02bf;}
.info{width:440px;height:400px;border:1px double #0278fd;margin:0 auto;background:#fff;}
table{margin-top:10px;padding-left:15px;}
button{margin-left:20px;width:60px;font-size:14px;border:1px solid #0278fd;}
button:hover{cursor:pointer;background:#ff6700;}
ul{list-style:none;line-height:2em;overflow:hidden;}
</style>
</head>
<body>
<div>
<h2>在线客服系统</h2>
<div>
<ul>
<li></li>
</ul>
</div>
<table>
<tr>
<td><textarea name="text" cols="45" rows="5"></textarea></td>
<td><button name="btn">发送</button></td>
</tr>
</table>
</div>
<script type="text/javascript">
//输入内容部分text
let text = document.getElementsByName('text').item(0);
console.log(text.value);
//提取btn按钮
let btn = document.getElementsByName('btn')[0];
//提取ul元素
let ul = document.getElementsByTagName('ul')[0];
//计数器
let li_number = 0 ;
btn.onclick = function(){
if(text.value.length === 0){
alert('请输入信息！');
return false;
}
//计数为2时，执行清屏操作
if(li_number==4){
while(ul.lastChild) //存在最后一个子节点就删除
{
ul.removeChild(ul.lastChild);
}
//重新赋值计数器
li_number = 0;
}
// 创建列表项li
let li = document.createElement('li');
//用户头像
let user1 = '<img src="inc/1.jpg" width=30 style="border-radius:50%">';
// 内容写入li中
li.innerHTML = user1 + ' ' +text.value;
// 写入li中内容进入ul列表中
ul.appendChild(li);
// info 输入框的内容清空
text.value = '';
li_number+=1;
//console.log(li_number);
setTimeout(function(){
infoauto = [
'你有什么需要帮助的吗?',
'你好，亲！',
'水天一色',
'日月同辉'
];
let info = infoauto[Math.floor(Math.random()*4)];
console.log(info);
// 创建自动回复的列表
let li2 = document.createElement('li');
//用户头像2
let user2 = '<img src="inc/2.jpg" width=30 style="border-radius:50%">';
li2.innerHTML = user2 +' ' + '<span style="color:red">' + info + '</span>';
ul.appendChild(li2);
li_number+=1;
},1500)
}
</script>
</body>
</html>
Correcting teacher：天蓬老师Correction time：2018-12-20 17:28:29
Teacher's summary：这个主要是考察你的dom操作能力, 基本的dom操作方法,就那几个, 非常好记的
