abstrait：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title&g
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div:nth-child(1){width: 450px;height: 650px;background-color: lightskyblue;margin: 30px auto;color: #333;box-shadow: 2px 2px 2px #808080;}
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: yellowgreen;font-size: 18px;}
button{width: 60px;height: 40px;background-color: #00CC66;color: #fff;border: none;}
button:hover{cursor: pointer;background-color: #ff6700;}
</style>
</head>
<body>
<div>
<h2>在線客服</h2>
<div>
<ul>
<li></li>
</ul>
</div>
<table>
<tr>
<td align="right"><textarea name="text" cols="30" rows="3"></textarea></td>
<td align="left"><button type="button">發(fā)送</button></td>
</tr>
</table>
</div>
<script>
//獲取到頁面中的相關(guān)元素
//獲取button
let button = document.getElementsByTagName('button').item(0);
//獲取用戶輸入的信息
let text = document.getElementsByTagName('textarea').item(0);
//獲取用于容納要顯示的信息的容器ul
let list = document.getElementsByTagName('ul').item(0);
//當(dāng)頁面超過10條清空聊天框需要計數(shù)器
let sum = 0;
//添加點(diǎn)擊事件，獲取用戶輸入的內(nèi)容并發(fā)送到窗口
button.onclick = function () {
//判斷用戶點(diǎn)擊提交前是否輸入內(nèi)容
if (text.value.length === 0){
alert('不要發(fā)送空文本');
return false;
}
//將用戶輸入的信息保存在變量userText中
let userText = text.value;
//清空用戶輸入信息框內(nèi)的內(nèi)容
text.value = '';
//創(chuàng)建一個變量newLi_L用于存放新建的li
let newLi_L = document.createElement("li");
//在li前面插入圖片 增加美感
let userPic = '<img src="static/images/B10.jpg" width="30px" style="border-radius: 50%">'
//把li中的內(nèi)容替換成用戶輸入的信息(前面添加上用戶頭像)
newLi_L.innerHTML = userPic + ' ' + userText;
//向ul列表添加li(含有聊天信息的)
list.appendChild(newLi_L);
//計數(shù)器自加1
sum += 1;
//設(shè)置自動回復(fù)
//設(shè)置定時器，1秒后回復(fù)
setTimeout(function () {
//自動回復(fù)信息的模板(數(shù)組)
let info = [
'第1條：_______.',
'第2條：_______.',
'第3條：_______.',
'第4條：_______.',
];
//將info數(shù)組中的模板信息隨機(jī)取出一條存入變量temp中
let temp = info[Math.floor(Math.random()*4)];
//創(chuàng)建li保存于newLi_R中
let newLi_R = document.createElement("li");
//創(chuàng)建變量存放客服的頭像
let servicePic = '<img src="static/images/B11.jpg" width="30px" style="border-radius: 50%">';
//將新建的li標(biāo)簽中的內(nèi)容替換成info中的隨機(jī)信息temp(并將字體顏色跟換)
newLi_R.innerHTML = servicePic + ' ' + "<span style='color:red'>" + temp + "</span>";
//將自動回復(fù)的信息發(fā)送出去
list.appendChild(newLi_R);
sum += 1;
},1000);
//清空窗口 并將計數(shù)器清零
if (sum > 10){
list.innerHTML = '';
sum = 0;
}
}
</script>
</body>
</html>
Professeur correcteur：天蓬老師Temps de correction：2019-04-09 10:58:56
Résumé du professeur：通過 這個小案例, 你學(xué)到了什么呢? 是不是對JavaScript強(qiáng)大的DOM操作能力有了新的認(rèn)識