摘要：计数器实现为2时，可清屏。 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>模拟在线客服系统一</title> <style type="text/css"> h2{font
计数器实现为2时，可清屏。
<!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(){
//计数为2时，执行清屏操作
if(li_number==2){
while(ul.lastChild) //存在最后一个子节点就删除
{
ul.removeChild(ul.lastChild);
}
//重新赋值计数器
li_number = 0;
}
// 创建列表项li
let li = document.createElement('li');
// 内容写入li中
li.innerHTML = text.value;
// 写入li中内容进入ul列表中
ul.appendChild(li);
// info 输入框的内容清空
text.value = '';
li_number+=1;
//console.log(li_number);
}
</script>
</body>
</html>
批改老师：灭绝师太批改时间：2018-12-20 15:35:34
老师总结：完成的不错！可以用自己的案例能举一反三就最好啦！
