abstrakt：<!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>在線客服聊天系統(tǒng)</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>發(fā)送</button></td>
</tr>
</table>
</div>
</body>
<script>
//獲取節(jié)點
let text = document.getElementsByTagName('textarea')[0];
let but = document.getElementsByTagName('button')[0];
let list = document.getElementsByTagName('ul')[0];
but.onclick = function () {
//判斷是否輸入內(nèi)容
if (text.value.length === 0){
alert('你是否忘記輸入內(nèi)容了呢');
return false;
}
let sum =0; //計數(shù)器
//創(chuàng)建新節(jié)點
let li = document.createElement('li');
//創(chuàng)建一個接收頭像的節(jié)點
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">';
//創(chuàng)建一個接收文字的節(jié)點
let text1 = text.value;
//用li節(jié)點接收內(nèi)容和圖片內(nèi)容
li.innerHTML = img +' '+'<span style="line-height: 40px;float:left;margin-left:10px;">'+text1+'</span>';
li.style.height="40px";
//在ul節(jié)點中插入li節(jié)點
list.appendChild(li);
//清空text節(jié)點的內(nèi)容
text.value = " ";
sum += 1 ;
// alert(sum);
//設(shè)置一個定時器,能夠自動回復(fù)
setTimeout(function(){
let info = [
'沒干什么',
'我吃了啊',
'你想我嗎',
'我想你了',
'在嗎',
'一起看電影嗎',
'不要離開我好嗎'
];
let temp = info[Math.floor(Math.random()*7)];
// Console.log(temp);
//創(chuàng)建新節(jié)點
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>基本功能都實現(xiàn)了,但是有兩個問題沒有搞明白,第一個是點擊but按鈕時老師寫了一個if判斷,如果文本域中沒寫東西就會跳出彈窗,第一次判斷的確是有效,但是第一次過后判斷就無法生效了,那么如何在每一次點擊的時候都判斷一下是否為空呢?第二點關(guān)于判斷計數(shù)器清空文本域,我自己敲了一遍,沒有實現(xiàn),又照著老師的敲了一遍,也沒實現(xiàn),代碼也無報錯,找了半個多小時的錯誤,無果,希望老師解答下.我自己也通過測試發(fā)現(xiàn)sum的數(shù)值的確在增加,但是后面那個if判斷卻不起作用.
Korrigierender Lehrer：天蓬老師Korrekturzeit：2019-04-01 09:49:25
Zusammenfassung des Lehrers：如果覺得代碼邏輯有問題,可以使用單步調(diào)試,跟蹤程序的執(zhí)行