abstrait：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>模擬智能客服在線(xiàn)系統(tǒng)2</title> <style> .contents{ width:500px; height:550px; background:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>模擬智能客服在線(xiàn)系統(tǒng)2</title>
<style>
.contents{
width:500px;
height:550px;
background: pink;
margin:30px auto;
box-shadow: 3px 3px 3px #808080;
}
h2{
text-align: center;
margin-bottom: -10px;
}
ul{
list-style: none;
line-height: 20px;
}
ul li{
margin:10px 0;
}
.content{
width:450px;
height:420px;
background: lightblue;
margin:10px auto;
border:1px solid green;
overflow: auto;
}
table{
width: 450px;
height:80px;
margin:0 auto;
}
textarea{
border:none;
background: lightyellow;
resize: none;
width: 380px;
}
button{
width: 60px;
height:60px;
border:none;
background: #12B7F5;
color: #FFF;
}
button:hover{
cursor:pointer;
background: orange;
}
</style>
</head>
<body>
<div class="contents">
<h2>在線(xiàn)客服</h2>
<div class="content">
<ul>
<li></li>
</ul>
</div>
<table>
<tr>
<td ><textarea name="text" cols="50" rows="4"></textarea></td>
<td ><button>發(fā)送</button></td>
</tr>
</table>
</div>
<script type="text/javascript">
//獲取元素
let text = document.getElementsByName('text')[0];
let btn = document.getElementsByTagName('button')[0];
let list = document.getElementsByTagName('ul')[0];
let sum = 0; //計(jì)數(shù)器
//添加點(diǎn)擊事件,獲取用戶(hù)說(shuō)的內(nèi)容并且發(fā)送到窗口
btn.onclick = function(){
//獲取用戶(hù)提交的內(nèi)容
if(text.value.length==0){
alert('好像忘了什么東西');
return false;
}
//創(chuàng)建一個(gè)li
let li = document.createElement('li')
//獲取用戶(hù)的提交的內(nèi)容并將內(nèi)容保存
let userContent = text.value;
//獲取用戶(hù)頭像
let img = '<img src="image/1.jpg" style="width:50px;border-radius:50%" >'
//改變li的內(nèi)容
li.innerHTML= img +' '+ userContent;
list.appendChild(li);
sum+=1;
//立即將用戶(hù)留言區(qū)清空
text.value="";
//設(shè)置一個(gè)定時(shí)器,2s后自動(dòng)回復(fù)
setTimeout(function(){
//自動(dòng)回復(fù)信息模板
let info = [
'親，你好啊',
'有什么需要幫助的呢',
'歡迎來(lái)到本店',
'親，對(duì)不起哦',
'回復(fù)請(qǐng)扣1'
];
//隨機(jī)選取0-5句回復(fù),獲取自動(dòng)回復(fù)的內(nèi)容
let temp = info[Math.floor(Math.random()*5) ];
//創(chuàng)建一句自動(dòng)回復(fù)
let reply = document.createElement('li');
//獲取客服頭像
let serviceImg = '<img src="image/p.jpg" style="width:50px;border-radius:50%" >';
//改變r(jià)eply的內(nèi)容
reply.innerHTML= serviceImg+'<span style="color:red">'+temp+'</span>'+' ';
list.appendChild(reply);
sum+=1;
},2000);
//清空窗口并將計(jì)數(shù)器清零
if(sum>10){
list.innerHTML="";
sum=0;
}
}
</script>
</body>
</html>1. setTimeout() ：在指定的毫秒數(shù)后調(diào)用函數(shù)或計(jì)算表達(dá)式。
語(yǔ)法:
setTimeout(code,millisec,lang)
code: 必需。要調(diào)用的函數(shù)后要執(zhí)行的 JavaScript 代碼串。
millisec: 必需。在執(zhí)行代碼前需等待的毫秒數(shù)。
lang 可選。腳本語(yǔ)言可以是：JScript | VBScript | JavaScript
2. floor() 方法可對(duì)一個(gè)數(shù)進(jìn)行下舍入。
語(yǔ)法:
Math.floor(x) 返回小于等于 x，且與 x 最接近的整數(shù)。
random() 方法可返回介于 0 ~ 1 之間的一個(gè)隨機(jī)數(shù)。
語(yǔ)法：
Math.random() 返回0.0 ~ 1.0 之間的一個(gè)偽隨機(jī)數(shù)。
Math.random()*5 返回[0,5)之間的隨機(jī)數(shù)
Professeur correcteur：韋小寶Temps de correction：2019-01-05 09:15:22
Résumé du professeur：寫(xiě)的還是很不錯(cuò)的！總結(jié)的也非常的完整！繼續(xù)加油吧！