abstrak：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>DOM實(shí)戰(zhàn)：模擬智能在線客服系統(tǒng)</title> <style type="text/css"> .content-
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>DOM實(shí)戰(zhàn)：模擬智能在線客服系統(tǒng)</title>
<style type="text/css">
.content-margin{width: 450px;heigth: 650px;background-color: lightskyblue;margin: 30px auto;color: #333;box-shadow: 2px 2px 2px #808080;}
h2{text-align: center;margin-bottom: -10px;}
.content{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: 400px;height: 80px;margin: auto;}
textarea{border: none;resize: none;background-color: lightyellow;outline: none;width: 350px;height: 50px;float: left;}
button{width: 50px;height: 40px;background-color: seagreen;color: white;border: none;float: right;overflow: hidden;cursor: pointer;outline: none;}
button:hover{background-color: orange;}
</style>
</head>
<body>
<div class="content-margin">
<h2>在線客服</h2>
<div class="content">
<ul>
<li></li>
</ul>
</div>
<table>
<tr>
<td align="right"><textarea name="text"></textarea></td>
<td align="left"><button type=button>發(fā)送</button></td>
</tr>
</table>
</div>
<script>
//獲取頁(yè)面中相關(guān)元素
let btn = document.getElementsByTagName('button')[0];
let text = document.getElementsByName('text')[0];
let ul = document.getElementsByTagName('ul')[0];
let sum = 0; //計(jì)數(shù)器
btn.onclick = function() {
if (text.value.length === 0){
alert('您沒(méi)有輸入任何信息,請(qǐng)重新輸入!');
return false;
}
let userComment = text.value;
text.value = '';//將留言區(qū)清空
let li = document.createElement('li');
let userPic = '<span style="display: inline-block;background-color: pink;width: 20px;height: 20px;border-radius: 50%;"></span>';
li.innerHTML = userPic + ' ' +userComment;
ul.appendChild(li);
sum += 1;
//設(shè)置定時(shí)器,2秒后自動(dòng)回復(fù)
setTimeout(function() {
//自動(dòng)回復(fù)信息的模板
let info = [
'你好?。?#39;,
'有什么可以幫你！',
'我不太明白你的意思',
'不好意思,我在忙',
'請(qǐng)等待！'
];
let temp = info[Math.floor(Math.random()*5)];
let reply = document.createElement('li');
let kefuPic = '<span style="display: inline-block;background-color: blue;width: 20px;height: 20px;border-radius: 50%;"></span>';
reply.innerHTML = kefuPic + ' ' + '<span style="color: red;">' + temp + '</span>';
ul.appendChild(reply);
sum += 1;
},2000);
//清空窗口并將計(jì)數(shù)器清零
if(sum > 10){
ul.innerHTML = '';
sum = 0;
}
}
</script>
</body>
</html>text.value.length是檢測(cè)textarea內(nèi)容的長(zhǎng)度，當(dāng)長(zhǎng)度為0，也就是沒(méi)有輸入內(nèi)容;
text.value為獲取textarea輸入框的內(nèi)容;
setTimeout為定時(shí)運(yùn)行函數(shù)操作，第一個(gè)參數(shù)填寫function函數(shù)，第二個(gè)參數(shù)為設(shè)置延時(shí)時(shí)間，單位為1000為1秒;
setTimeout(function(), time);
Math.floor(x)返回小于等于x的最大整數(shù)；如x=1.8，則返回1;
Math.random(),選取大于等于 0.0 且小于 1.0 的偽隨機(jī) double 值
Math.floor(Math.random()*5);獲取0到4之間的整數(shù)
Guru membetulkan：查無(wú)此人Masa pembetulan：2019-01-18 09:18:43
Rumusan guru：完成的不錯(cuò)。你可以繼續(xù)增加功能，根據(jù)對(duì)方的問(wèn)話，回答相對(duì)應(yīng)的自動(dòng)回復(fù)。繼續(xù)加油。