【前端笔记】二、JavaScript实例


以创建一个自动回复的聊天机器人为例

一、界面准备

先搭一个界面

<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.获取输入的消息

在这里要实现的功能是监听发送按钮的点击事件, 然后在事件触发的那个函数里:

  1. 找到文本输入框,获得输入框里的用户输入文本消息
  2. alert到屏幕上
  3. 清空输入框
// 找到发送按钮
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/

  • 2
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 5
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值