abstrait：JS實(shí)現(xiàn)一個在線客服聊天1.獲取DOM元素//通過按鈕標(biāo)簽名獲取元素：ElementsByTagNamelet btn = document.getElementsByTagName('button')[0];//通過textarea文本域name名獲取元素：getElementsByNamelet text = document.getElementsByName('te

JS實(shí)現(xiàn)一個在線客服聊天

1.獲取DOM元素

//通過按鈕標(biāo)簽名獲取元素：ElementsByTagName

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

//通過textarea文本域name名獲取元素：getElementsByName

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

//通過按鈕標(biāo)簽名獲取元素：ElementsByTagName

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

2.計數(shù)器，用來計算聊天次數(shù)

let sum = 0;

3.事件函數(shù)：

按鈕事件：

//判斷用戶是否輸入

if（輸入框value值的length===0）{

alert（‘您未輸入內(nèi)容，請輸入后在發(fā)送！’）

//輸入框返回一個假值

return false；

//清空上次輸入的內(nèi)容userCommentf

聲明一個userCommentf = text.value；

//創(chuàng)建一個新DOM元素節(jié)點(diǎn) li標(biāo)簽

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

//把li標(biāo)簽的內(nèi)容替換成userCommentf

li.innerHTNML = userCommentf;

//let userPic用戶頭像；

let userPic = '<img src="https://dwz.cn/CqtDdPv0" width="30" style="border-radius:50%">';

合并用戶頭像+用戶輸入的文字內(nèi)容；

li.innerHTNML=userPic+‘ ’+userCommentf

//然后是list   ul標(biāo)簽更新li節(jié)點(diǎn)  appendChild（）更新節(jié)點(diǎn)  作用是插入新的對話在聊天窗口

list.appendChild('li');

//接著讓聊天記錄，有新的內(nèi)容的時候自增1

sum+=1；

//setTimeout設(shè)置定時器 默認(rèn)是2秒后自動回復(fù)內(nèi)容

setTimeout（function）{

let info =[ '您好'，'人工服務(wù)'，'發(fā)貨時間'，'熱線電話'，'工作時間'，]；

}

//Math.floor取整不帶小數(shù)點(diǎn)  Math.random取隨機(jī)數(shù)()*3是0-3之間的整數(shù)

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

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

//  reply 創(chuàng)建一個新li節(jié)點(diǎn)

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

//kefuPic 客服頭像

let kefuPic = '<img src="https://dwz.cn/vpSlTnhx" width="30" style="border-radius:50%;">';

//reply 新的li節(jié)點(diǎn)插入頁面上顯示客服頭像+temp  自動回復(fù)內(nèi)容

reply.innerHTML = kefuPic + ' ' + '<span style="color:red">'+temp+'</span>';

//然后把上面的內(nèi)容插入到ul里面，js就是list里面，

list.appendChild(reply);

// 最后sum完成后自增+1

sum += 1;

//定時器可以設(shè)置2秒的時間回復(fù)注意格式哦！

setTimeout(function(){};2000）

// 當(dāng)聊天記錄達(dá)到10條時清空窗口

if (sum > 10) {

   list.innerHTML = '';

   sum = 0;

}

<div>
    <h2>在線客服</h2>
    <!--contenteditable="true"屬性則可以對該標(biāo)簽進(jìn)行編輯-->
    <div contenteditable="true">
        <ul>
            <li></li>
        </ul>
    </div>
    <table>
        <tr>
            <td align="right">
                <!-- cols 和 rows 屬性來規(guī)定 textarea 的尺寸cols是行，rows是列-->
                <textarea cols="50" rows="4" name="text"></textarea>
            </td>
            <td align="left">
                <button type=button>發(fā)送</button>
            </td>
        </tr>
    </table>
</div>

Professeur correcteur：天蓬老師Temps de correction：2019-01-13 09:29:28
Résumé du professeur：想起來了, 這個課程是我錄制的, 你做的客服練習(xí),就是考察你的dom操作, 看來你掌握了