一、界面準備

先搭一個界面

<header>
  <h2>聊天機器人</h2>
</header>

<ul class="message-list" id="message-list">
  <li class="message-list__item-robot"><div>
    你好，我是聊天機器人
    </div></li>
  <li class="message-list__item-user"><div>
    你好
    </div></li>
</ul>

<!--輸入區-->
<div class="message-send ">
  <textarea id="inputArea"></textarea>
  <button id="sendMsgButton">發送</button>
</div>

* {
  margin: 0;
  padding: 0;
}

header{
  background-color:dodgerblue;
  color:white;
  padding:15px 0px;
  display:flex;
  justify-content: center;
}

.message-list {
  height: 280px;
  padding: 10px;
  overflow: auto;
}


.message-list__item-robot,
.message-list__item-user {
  margin-bottom: 10px;
  display: flex;
}

.message-list__item-user {
  flex-direction: row-reverse;
}

.message-list__item-robot div{
  padding: 7px;
  border-radius:5px;
  background:lightgray;
}
.message-list__item-user div{
  padding: 7px;
  border-radius:5px;
  background:dodgerblue;
  color:white;
}
.message-send {
  display: flex;
  height: 100px;
}
.message-send{
  border-top:1px solid lightgray;
  height:150px;
  display:flex;
  
}
.message-send textarea {
  outline:none;
  border:none;
  flex-grow: 1;
  padding:7px;
  font-size: 16px;
}
.message-send button {
  border:none;
  width:50px;
  background:dodgerblue;
  color:white;
}

效果如下：
在這里插入圖片描述

二、業務邏輯

整體的事件流程
在這里插入圖片描述

三、js代碼

按照業務邏輯循序漸進：

1.獲取輸入的訊息

在這里要實作的功能是監聽發送按鈕的點擊事件, 然后在事件觸發的那個函式里：

找到文本輸入框，獲得輸入框里的用戶輸入文本訊息
alert到螢屏上
清空輸入框

// 找到發送按鈕
var sendMsgButton = document.getElementById("sendMsgButton")
// 找到輸入框
var inputArea = document.getElementById("inputArea")
// 發送按鈕的點擊事件
sendMsgButton.onclick = function (e) {
  // 獲取輸入框文字
  var userMsg = inputArea.value;
  // 彈窗
  alert(userMsg)
  // 清空輸入框
  inputArea.value = ''
}

2.發送輸入的訊息

把輸入框獲取到的資訊添加到訊息串列，即在頁面的ul串列里添加一個節點：
1.創建一個li節點
2.給這個節點添加類名
3.創建一個div標簽
4.給這個div標簽加上訊息內容
5.把這個li節點添加到界面上去

// 找到發送按鈕
var sendMsgButton = document.getElementById('sendMsgButton')
// 找到輸入框
var inputArea = document.getElementById('inputArea')
// 找到聊天串列
var msgList = document.getElementById('message-list')


// 監聽點擊事件
sendMsgButton.addEventListener('click', function(e) {
  // 獲取輸入框文字
  var userMsg = inputArea.value;
  // 清空輸入框
  inputArea.value = ''
  //新增記錄
  var li_user=document.createElement('li')
  li_user.className='message-list__item-user'
  var div_user=document.createElement('div')
  div_user.innerText=userMsg
  //添加至聊天記錄中
  li_user.appendChild(div_user)
  msgList.appendChild(li_user)
})

3.獲取機器人的訊息

先用一個陣列存放模擬機器人說的話，從上面那個陣列里隨機選取一條資料作為機器人的回復

//模擬資料
var data = [
  '我是聊天機器人，你好啊',
  '今天天氣不錯哎',
  '手機快沒電了，回聊唄',
  '我去洗澡了，待會聊唄'
]
// 隨機選取一條
var randomNumber = Math.floor(Math.random() * data.length)
var botMsg=data[randomNumber]
console.log(botMsg)

4.完成聊天機器人

和新增用戶訊息一樣，把新增機器人的訊息合并到前面的代碼

//模擬資料
var data = [
  '我是聊天機器人，你好啊',
  '今天天氣不錯哎',
  '手機快沒電了，回聊唄',
  '我去洗澡了，待會聊唄'
]  
// 找到發送按鈕
var sendMsgButton = document.getElementById('sendMsgButton')
// 找到輸入框
var inputArea = document.getElementById('inputArea')
// 找到聊天串列
var msgList = document.getElementById('message-list')

// 監聽點擊事件
sendMsgButton.addEventListener('click', function(e) {
  // 獲取輸入框文字
  var userMsg = inputArea.value;
  // 清空輸入框
  inputArea.value = ''
  //新增記錄
  var li_user=document.createElement('li')
  li_user.className='message-list__item-user'
  var div_user=document.createElement('div')
  div_user.innerText=userMsg
  //添加至聊天記錄中
  li_user.appendChild(div_user)
  msgList.appendChild(li_user)
  
  // 隨機選取一條模擬資料回復
	var randomNumber = Math.floor(Math.random() * data.length)
	var botMsg=data[randomNumber]
  var li_bot=document.createElement("li")
  li_bot.className="message-list__item-robot"
  var div_bot=document.createElement("div")
  div_bot.innerText = botMsg
  //添加至聊天記錄中
  li_bot.appendChild(div_bot)
  msgList.appendChild(li_bot)
})

5.最終結果

可以看到用戶發送訊息和機器人發送訊息的代碼有很多重復，所以獨立出來作為一個單獨的函式

/**
 * 統一的添加訊息函式
 * @param msg 需要添加的訊息
 * @param className 訊息節點的類名
 */
function sendMsg(msg, className){
  //創建元素
  var li=document.createElement('li')
  li.className=className
  var div=document.createElement('div')
  div.innerText=msg
  //添加至聊天記錄中
  li.appendChild(div)
  msgList.appendChild(li)
}

合并代碼：

//模擬資料
var data = [
  '我是聊天機器人，你好啊',
  '今天天氣不錯哎',
  '手機快沒電了，回聊唄',
  '我去洗澡了，待會聊唄'
]  
// 找到發送按鈕
var sendMsgButton = document.getElementById('sendMsgButton')
// 找到輸入框
var inputArea = document.getElementById('inputArea')
// 找到聊天串列
var msgList = document.getElementById('message-list')

/**
 * 統一的添加訊息函式
 * @param msg 需要添加的訊息
 * @param className 訊息節點的類名
 */
function sendMsg(msg, className){
  //創建元素
  var li=document.createElement('li')
  li.className=className
  var div=document.createElement('div')
  div.innerText=msg
  //添加至聊天記錄中
  li.appendChild(div)
  msgList.appendChild(li)
}

// 監聽點擊事件
sendMsgButton.onclick = function(e) {
  // 獲取輸入框文字
  var userMsg = inputArea.value;
  // 清空輸入框
  inputArea.value = ''
  //發送用戶訊息
  sendMsg(userMsg,"message-list__item-user")
   // 隨機選取一條模擬資料回復
	var randomNumber = Math.floor(Math.random() * data.length)
	var botMsg=data[randomNumber]
  //發送機器人訊息
  sendMsg(botMsg,"message-list__item-robot")
}

效果如下：
在這里插入圖片描述
輸入訊息并點擊發送會隨機彈出回復，訊息記錄較多時中間的串列可滑動

參考：
前端入門：https://www.zhihu.com/question/32314049/answer/713711753
然代碼：https://www.qsxqd.com/

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/290458.html

標籤：其他

上一篇：vue階段小實訓第一周面試題

下一篇：JavaScript入門第二章（變數宣告/賦值/取值）

【前端筆記】二、JavaScript實體

目錄