abstract：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>在线客服聊天系统</title>
<style>
*{margin:0;padding:0;}
.box1 {
width: 500px;
height: 600px;
background: aqua;
margin: 50px auto;
}
h2 {
text-align: center;
color: #333;
}
.box2 {
width: 90%;
height: 400px;
margin: 20px auto;
background: #fff;
color: #333;
}
ul {
list-style-type: none;
padding:10px;
}
table {
width: 90%;
height: 80px;
margin: 5px auto;
}
textarea {
width: 350px;
height: 60px;
}
button {
width: 60px;
height: 60px;
border: none;
border-radius: 10px;
}
button:hover {
background: #ff4700;
cursor: pointer;
/* display: inline-block; */
}
</style>
</head>
<body>
<div class="box1">
<h2>聊天框</h2>
<div class="box2">
<ul>
<li></li>
</ul>
</div>
<table>
<tr>
<td><textarea></textarea></td>
<td><button>发送</button></td>
</tr>
</table>
</div>
</body>
<script>
//获取节点
let text = document.getElementsByTagName('textarea')[0];
let but = document.getElementsByTagName('button')[0];
let list = document.getElementsByTagName('ul')[0];
but.onclick = function () {
//判断是否输入内容
if (text.value.length === 0){
alert('你是否忘记输入内容了呢');
return false;
}
let sum =0; //计数器
//创建新节点
let li = document.createElement('li');
//创建一个接收头像的节点
let img = '<img style="width:30px;height:30px;border-radius:50%;float:left;" src="http://img2.imgtn.bdimg.com/it/u=2060761043,284284863&fm=26&gp=0.jpg">';
//创建一个接收文字的节点
let text1 = text.value;
//用li节点接收内容和图片内容
li.innerHTML = img +' '+'<span style="line-height: 40px;float:left;margin-left:10px;">'+text1+'</span>';
li.style.height="40px";
//在ul节点中插入li节点
list.appendChild(li);
//清空text节点的内容
text.value = " ";
sum += 1 ;
// alert(sum);
//设置一个定时器,能够自动回复
setTimeout(function(){
let info = [
'没干什么',
'我吃了啊',
'你想我吗',
'我想你了',
'在吗',
'一起看电影吗',
'不要离开我好吗'
];
let temp = info[Math.floor(Math.random()*7)];
// Console.log(temp);
//创建新节点
let li2 = document.createElement('li');
let img2 = '<img style="float:right;width:30px;height:30px;border-radius:50%;" src="http://img5.imgtn.bdimg.com/it/u=2467153489,966901276&fm=26&gp=0.jpg">';
li2.innerHTML =img2+' '+'<span style="color:red;float:right;line-height: 40px;margin-right:10px;">'+temp+'</span>';
li2.style.height="40px";
list.appendChild(li2);
sum += 1 ;
// alert(sum);
},2000);
// console.log(sum);
if (sum > 10) {
list.innerHTML = '';
sum =0;
};
}
</script>
</html>基本功能都实现了,但是有两个问题没有搞明白,第一个是点击but按钮时老师写了一个if判断,如果文本域中没写东西就会跳出弹窗,第一次判断的确是有效,但是第一次过后判断就无法生效了,那么如何在每一次点击的时候都判断一下是否为空呢?第二点关于判断计数器清空文本域,我自己敲了一遍,没有实现,又照着老师的敲了一遍,也没实现,代码也无报错,找了半个多小时的错误,无果,希望老师解答下.我自己也通过测试发现sum的数值的确在增加,但是后面那个if判断却不起作用.
Correcting teacher：天蓬老师Correction time：2019-04-01 09:49:25
Teacher's summary：如果觉得代码逻辑有问题,可以使用单步调试,跟踪程序的执行