摘要：看似簡單，但自己做的時候總是記不住那些方法和屬性，還是多記多練習

DOM實戰：模擬智能在線客服系統

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-type: none;

line-height: 2em;

overflow: hidden;

padding: 15px;

}

table {

width: 90%;

height: 80px;

margin: 0px auto;

}

textarea {

border: none;

resize: none;

background-color: lightyellow;

}

button {

width: 60px;

height: 40px;

background-color: seagreen;

color: white;

border: none;

}

button:hover {

cursor: pointer;

background-color: orange;

}

在線客服

發送

//獲取到頁面中的相關元素

let btn = document.getElementsByTagName('button')[0];

let text = document.getElementsByName('text')[0];

let list = document.getElementsByTagName('ul')[0];

let sum = 0; ?//計數器

//添加點擊事件，獲取用戶說的內容并發送到窗口

btn.onclick = function(){

//獲取用戶提交的內容

if (text.value.length === 0) {

alert('客官，是不是忘了想說什么了？');

return false;

}

let userComment = text.value; ?//將用戶提交的內容獲取并保存

text.value = '';

//創建一個li

let li = document.createElement('li');

//用戶頭像

// ? ?let userPic = '';

//將用戶輸入的信息添加到聊天窗口

li.innerHTML = userComment;

list.appendChild(li);

sum +=1;

//回復,設置定時器，2秒后自動回復

setTimeout(function(){

let info = [

'真煩人，有話快說，別耽誤我學習',

'除了退款退貨，什么都可以問',

'說的啥，本姑娘怎么聽不明白呢？',

'在我覺得方便的時候再回復你',

'投訴我的人多了去了，哈哈哈。'

];

let temp = info[Math.floor(Math.random()*4)];

let reply = document.createElement('li');

// ? ?let kefuPic = '';

reply.innerHTML = '' + temp + '';

list.appendChild(reply);

sum += 1;

},1000);

//清空窗口并將計數器清零

if (sum > 10){

list.innerHTML = '';

sum = 0;

}

}

批改老師：歐陽批改時間：2019-03-18 09:12:31

老師總結：寫的還不錯。剛開始都記不住方法和屬性。 就算寫了10年代碼，也不可能記住全部的方法和屬于，只能記得常用的。繼續加油。

總結

以上是生活随笔為你收集整理的php js在线聊天,js实现智能在线客服系统的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。