前端开发 -- 自动回复机器人【附完整源码】

一：效果展示

本项目实现了一个简单的网页聊天界面，用户可以在输入框中输入消息，并点击发送按钮或按下回车键来发送消息。机器人会根据用户发送的消息内容，通过关键字匹配来生成自动回复。
在这里插入图片描述

二：源代码分享

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>关键字自动回复</title><style>body {font-family: Arial, sans-serif;display: flex;justify-content: center;align-items: center;height: 100vh;margin: 0;background-color: #f0f0f0;overflow: hidden;}.chat-title {text-align: center;padding: 10px;font-weight: bold;border-bottom: 2px solid #ccc;}.chat-container {width: 300px;border: 2px solid #ccc;border-radius: 5px;background-color: #fff;display: flex;flex-direction: column;max-height: 90vh;}.chat-window {flex: 1;padding: 10px;overflow-y: auto;border-bottom: 2px solid #ccc;}.chat-window div {display: flex;margin-bottom: 10px;}.user-message {justify-content: flex-end;color: #007bff;}.bot-message {justify-content: flex-start;color: #28a745;}.message-content {display: flex;align-items: center;}.message-content img {width: 30px;height: 30px;border-radius: 50%;margin-right: 5px; }.message-text {max-width: 200px; padding: 5px;border-radius: 5px;word-wrap: break-word; white-space: normal; }.user-message .message-content {gap: 5px;}.user-message .message-text {background-color: #e9f5ff;}.bot-message .message-text {background-color: #d1f9d1;}.input-container {display: flex;padding: 10px;}#userInput {flex: 1;padding: 5px;border: 1px solid #ccc;border-radius: 3px;}#sendButton {padding: 5px 10px;margin-left: 5px;border: 1px solid #ccc;background-color: #007bff;color: #fff;border-radius: 3px;cursor: pointer;}</style>
</head>
<body><div class="chat-container"><div class="chat-title">自动回复机器人</div><div class="chat-window" id="chatWindow"></div><div class="input-container"><input type="text" id="userInput" placeholder="请输入......"><button id="sendButton">发送</button></div></div><script>document.addEventListener('DOMContentLoaded', () => {const chatWindow = document.getElementById('chatWindow');const userInput = document.getElementById('userInput');const sendButton = document.getElementById('sendButton');sendButton.addEventListener('click', sendMessage);userInput.addEventListener('keypress', (e) => {if (e.key === 'Enter') {sendMessage();}});function sendMessage() {const userMessage = userInput.value.trim();if (userMessage) {addMessage(userMessage, 'user');// 使用本地生成的回复const reply = generateAIReply(userMessage);addMessage(reply, 'bot');userInput.value = '';}}function generateAIReply(message) {message = message.toLowerCase();if (message.includes("你好") || message.includes("hi")) {return "你好！有什么我可以帮助你的吗？";} else if (message.includes("你想我吗")) {return "我当然想和你聊天啦！";} else if (message.includes("你在干嘛")) {return "我正在用人类的语言和你聊天呢！";} else if (message.includes("现在几点")) {return "当前时间为：" + new Date().toLocaleTimeString();} else {return "我不太明白你的意思，可以说得更清楚一些吗？";}}function addMessage(message, sender) {const messageElement = document.createElement('div');messageElement.className = sender === 'user' ? 'user-message' : 'bot-message';const messageContent = document.createElement('div');messageContent.className = 'message-content';const text = document.createElement('span');text.className = 'message-text';text.textContent = message;messageContent.appendChild(text);const avatar = document.createElement('img');if (sender === 'user') {avatar.src = '头像1.jpg'; // 用户头像链接messageContent.appendChild(avatar); } else {avatar.src = '头像2.jpg'; // 机器人头像链接messageContent.insertBefore(avatar, text); }messageElement.appendChild(messageContent);chatWindow.appendChild(messageElement);chatWindow.scrollTop = chatWindow.scrollHeight;}});</script>
</body>
</html>

三：代码分析

1.HTML结构
<!DOCTYPE html>
<!-- 定义HTML文档的语言为英文 -->
<html lang="en">
<head><meta charset="UTF-8"><!-- 设置视口，使页面在移动设备上以合适的比例显示，宽度等于设备宽度，初始缩放比例为1 --><meta name="viewport" content="width=device-width, initial-scale=1.0"><!-- 设置网页的标题 --><title>关键字自动回复</title><style>/* CSS样式在这里定义,用于美化页面 */</style>
</head>
<body><!-- 定义一个容器，用于包含聊天界面的所有元素 --><div class="chat-container"><!-- 定义聊天窗口的标题 --><div class="chat-title">自动回复机器人</div><!-- 定义聊天窗口，用于显示聊天内容，设置id以便JS操作 --><div class="chat-window" id="chatWindow"></div><!-- 定义一个容器，包含输入框和发送按钮 --><div class="input-container"><!-- 定义一个文本输入框，用户在此输入信息 --><input type="text" id="userInput" placeholder="请输入......"> <!-- 定义一个按钮，用户点击后发送输入框中的内容 --><button id="sendButton">发送</button>            </div></div><script>// JavaScript代码在这里，用于实现页面的交互功能</script>
</body>
</html>
  • <head>部分：定义了文档的元数据，包括窗口设置和标题，以及内嵌的CSS样式。
  • <body>部分：包含一个聊天容器，其中包括聊天标题、聊天窗口和输入容器。
2.CSS结构

body {font-family: Arial, sans-serif;/* 设置页面整体字体为Arial，如果Arial不可用则使用sans-serif作为备用 */display: flex;/* 使用Flexbox布局，使子元素能够灵活排列 */justify-content: center;/* 水平方向上居中对齐子元素 */align-items: center;/* 垂直方向上居中对齐子元素 */height: 100vh;/* 设置页面高度为视口高度的100%，确保页面占满整个屏幕 */margin: 0;/* 移除默认的页面外边距 */background-color: #f0f0f0;/* 设置页面背景颜色为浅灰色 */overflow: hidden;/* 隐藏超出视口的内容，防止滚动条出现 */
}.chat-title {text-align: center;/* 标题文本居中对齐 */padding: 10px;/* 在标题周围添加内边距，使其与边框有一定距离 */font-weight: bold;/* 设置标题字体为粗体 */border-bottom: 2px solid #ccc;/* 在标题下方添加一条2像素宽的灰色边框 */
}.chat-container {width: 300px;/* 设置聊天容器的宽度为300像素 */border: 2px solid #ccc;/* 为聊天容器添加2像素宽的灰色边框 */border-radius: 5px;/* 设置聊天容器的边框圆角为5像素 */background-color: #fff;/* 设置聊天容器背景颜色为白色 */display: flex;/* 使用Flexbox布局，使聊天窗口和输入框能够灵活排列 */flex-direction: column;/* 设置Flexbox方向为垂直，使子元素垂直排列 */max-height: 90vh;/* 设置聊天容器的最大高度为视口高度的90% */
}.chat-window {flex: 1;/* 使聊天窗口占据可用空间的剩余部分 */padding: 10px;/* 在聊天窗口内部添加内边距 */overflow-y: auto;/* 如果内容超出可视区域，允许垂直滚动 */border-bottom: 2px solid #ccc;/* 在聊天窗口底部添加一条2像素宽的灰色边框 */
}.chat-window div {display: flex;/* 使用Flexbox布局，使消息能够灵活排列 */margin-bottom: 10px;/* 在每个消息下方添加10像素的外边距 */
}.user-message {justify-content: flex-end;/* 将用户消息右对齐 */color: #007bff;/* 设置用户消息文本颜色为蓝色 */
}.bot-message {justify-content: flex-start;/* 将机器人消息左对齐 */color: #28a745;/* 设置机器人消息文本颜色为绿色 */
}.message-content {display: flex;/* 使用Flexbox布局，使头像和文本能够水平排列 */align-items: center;/* 垂直居中对齐头像和文本 */
}.message-content img {width: 30px;/* 设置头像宽度为30像素 */height: 30px;/* 设置头像高度为30像素 */border-radius: 50%;/* 设置头像为圆形 */margin-right: 5px;/* 给头像右边添加5像素的外边距 */
}.message-text {max-width: 200px;/* 控制消息文本的最大宽度 */padding: 5px;/* 在消息文本周围添加内边距 */border-radius: 5px;/* 设置消息文本的边框圆角为5像素 */word-wrap: break-word;/* 确保长单词也能换行 */white-space: normal;/* 允许文本内的空白符正常显示，允许换行 */
}.user-message .message-content {gap: 5px;/* 使用gap属性增加头像和文本之间的间距 */
}.user-message .message-text {background-color: #e9f5ff;/* 设置用户消息背景颜色为浅蓝色 */
}.bot-message .message-text {background-color: #d1f9d1;/* 设置机器人消息背景颜色为浅绿色 */
}.input-container {display: flex;/* 使用Flexbox布局，使输入框和按钮能够水平排列 */padding: 10px;/* 在输入容器内部添加内边距 */
}#userInput {flex: 1;/* 使输入框占据可用空间的剩余部分 */padding: 5px;/* 在输入框内部添加内边距 */border: 1px solid #ccc;/* 为输入框添加1像素宽的灰色边框 */border-radius: 3px;/* 设置输入框的边框圆角为3像素 */
}#sendButton {padding: 5px 10px;/* 在按钮内部添加内边距，上下5像素，左右10像素 */margin-left: 5px;/* 在按钮左边添加5像素的外边距，与输入框保持一定距离 */border: 1px solid #ccc;/* 为按钮添加1像素宽的灰色边框 */background-color: #007bff;/* 设置按钮背景颜色为蓝色 */color: #fff;/* 设置按钮文本颜色为白色 */border-radius: 3px;/* 设置按钮的边框圆角为3像素 */cursor: pointer;/* 当鼠标悬停在按钮上时，显示为手型光标，表示可点击 */
}
  • 布局与对齐：使用Flexbox布局来实现元素的居中对齐和分布，使得聊天界面在不同设备上都能保持良好的显示效果。
  • 样式与主题：通过颜色和背景的设置，区分用户消息和机器人消息，增强用户体验。使用圆角、边距和内边距来增加视觉层次和舒适度。
  • 响应式设计：通过设置最大高度和允许滚动，确保聊天窗口在内容过多时不会破坏页面的整体布局。
3.JavaScript结构
document.addEventListener('DOMContentLoaded', () => {// 当DOM内容加载完毕后，执行以下代码const chatWindow = document.getElementById('chatWindow');// 获取页面中ID为'chatWindow'的元素，用于显示聊天消息const userInput = document.getElementById('userInput');// 获取页面中ID为'userInput'的元素，用于用户输入消息const sendButton = document.getElementById('sendButton');// 获取页面中ID为'sendButton'的元素，即发送消息的按钮sendButton.addEventListener('click', sendMessage);// 为发送按钮添加点击事件监听器，点击时调用sendMessage函数userInput.addEventListener('keypress', (e) => {// 为用户输入框添加键盘按键事件监听器if (e.key === 'Enter') {// 如果按下的键是'Enter'（回车键）sendMessage();// 调用sendMessage函数发送消息}});function sendMessage() {// 定义sendMessage函数，用于处理消息发送逻辑const userMessage = userInput.value.trim();// 获取用户输入框的值，并去除首尾空白if (userMessage) {addMessage(userMessage, 'user');// 调用addMessage函数，将用户消息添加到聊天窗口const reply = generateAIReply(userMessage);// 调用generateAIReply函数，生成AI的回复addMessage(reply, 'bot');// 调用addMessage函数，将AI的回复添加到聊天窗口userInput.value = '';// 清空用户输入框}}function generateAIReply(message) {// 定义generateAIReply函数，用于生成AI的回复message = message.toLowerCase();// 将用户消息转换为小写，以便进行不区分大小写的匹配if (message.includes("你好") || message.includes("hi")) {// 如果消息包含"你好"或"hi"return "你好！有什么我可以帮助你的吗？";// 返回AI的问候语}// 其他关键字回复else {// 如果消息不包含上述关键字return "我不太明白你的意思，可以说得更清楚一些吗？";// 返回AI的不理解回复}}function addMessage(message, sender) {// 定义addMessage函数，用于将消息添加到聊天窗口const messageElement = document.createElement('div');// 创建一个div元素，作为消息容器messageElement.className = sender === 'user' ? 'user-message' : 'bot-message';// 根据发送者（用户或AI）设置消息容器的类名const messageContent = document.createElement('div');// 创建一个div元素，作为消息内容的容器messageContent.className = 'message-content';// 设置消息内容容器的类名const text = document.createElement('span');// 创建一个span元素，用于显示消息文本text.className = 'message-text';// 设置消息文本的类名text.textContent = message;// 设置消息文本的内容messageContent.appendChild(text);// 将消息文本添加到消息内容容器中const avatar = document.createElement('img');// 创建一个img元素，用于显示发送者的头像if (sender === 'user') {avatar.src = '头像1.jpg';// 设置头像的图片源为用户头像messageContent.appendChild(avatar);} else {avatar.src = '头像2.jpg';// 设置头像的图片源为AI头像messageContent.insertBefore(avatar, text);}messageElement.appendChild(messageContent);// 将消息内容容器添加到消息容器中chatWindow.appendChild(messageElement);// 将消息容器添加到聊天窗口中chatWindow.scrollTop = chatWindow.scrollHeight;// 将聊天窗口滚动到最底部，以便显示最新消息}
});

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/bicheng/65342.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

Python数据可视化小项目

Python数据可视化小项目

英雄联盟S14世界赛选手数据可视化 由于本学期有一门数据可视化课程&#xff0c;课程结课作业要求完成一个数据可视化的小Demo&#xff0c;于是便有了这个小项目&#xff0c;课程老师要求比较简单&#xff0c;只要求熟练运用可视化工具展示数据&#xff0c;并不要求数据来源&am…
阅读更多...
Linux系统编程——详解页表

Linux系统编程——详解页表

目录 一、前言 二、深入理解页表 三、页表的实际组成 四、总结&#xff1a; 一、前言 页表是我们之前在讲到程序地址空间的时候说到的&#xff0c;它是物理内存到进程程序地址空间的一个桥梁&#xff0c;通过它物理内存的数据和代码才能映射到进程的程序地址空间中&#xff…
阅读更多...
【Java数据结构】LinkedList与链表

【Java数据结构】LinkedList与链表

认识LinkedList LinkedList就是一个链表&#xff0c;它也是实现List接口的一个类。LinkedList就是通过next引用将所有的结点链接起来&#xff0c;所以不需要数组。LinkedList也是以泛型的方法实现的&#xff0c;所以使用这个类都需要实例化对象。 链表分为很多种&#xff0c;比…
阅读更多...
《一文读懂卷积网络CNN：原理、模型与应用全解析》

《一文读懂卷积网络CNN：原理、模型与应用全解析》

《一文读懂卷积网络CNN&#xff1a;原理、模型与应用全解析》 一、CNN 基本原理大揭秘&#xff08;一&#xff09;从人类视觉到 CNN 灵感&#xff08;二&#xff09;核心组件详解 二、经典 CNN 模型巡礼&#xff08;一&#xff09;LeNet-5&#xff1a;开山鼻祖&#xff08;二&a…
阅读更多...
教育元宇宙的优势与核心功能解析

教育元宇宙的优势与核心功能解析

随着科技的飞速发展&#xff0c;教育领域正迎来一场前所未有的变革。教育元宇宙作为新兴的教育形态&#xff0c;以其独特的优势和丰富的功能&#xff0c;正在逐步改变我们的学习方式。本文将深入探讨教育元宇宙的优势以及其核心功能&#xff0c;为您揭示这一未来教育的新趋势。…
阅读更多...
openGauss与GaussDB系统架构对比

openGauss与GaussDB系统架构对比

openGauss与GaussDB系统架构对比 系统架构对比openGauss架构GaussDB架构 GaussDB集群管理组件 系统架构对比 openGauss架构 openGauss是集中式数据库系统&#xff0c;业务数据存储在单个物理节点上&#xff0c;数据访问任务被推送到服务节点执行&#xff0c;通过服务器的高并…
阅读更多...
idea 8年使用整理

idea 8年使用整理

文章目录 前言idea 8年使用整理1. 覆盖application配置2. 启动的时候设置编辑空间大小&#xff0c;并忽略最大空间3. 查询类的关系4. 查看这个方法的引用关系5. 查看方法的调用关系5.1. 查看被调用关系5.2. 查看调用关系 6. 方法分隔线7. 选择快捷键类型8. 代码预览插件9. JReb…
阅读更多...
C++ OCR 文字识别

C++ OCR 文字识别

一.引言 文字识别&#xff0c;也称为光学字符识别&#xff08;Optical Character Recognition, OCR&#xff09;&#xff0c;是一种将不同形式的文档&#xff08;如扫描的纸质文档、PDF文件或数字相机拍摄的图片&#xff09;中的文字转换成可编辑和可搜索的数据的技术。随着技…
阅读更多...
SQL中的窗口函数

SQL中的窗口函数

1.窗口函数简介 窗口函数是SQL中的一项高级特性&#xff0c;用于在不改变查询结果集行数的情况下&#xff0c;对每一行执行聚合计算或者其他复杂的计算&#xff0c;也就是说窗口函数可以跨行计算&#xff0c;可以扫描所有的行&#xff0c;并把结果填到每一行中。这些函数通常与…
阅读更多...
SpringBoot（Ⅱ）——@SpringBootApplication注解+自动装配原理+约定大于配置

SpringBoot（Ⅱ）——@SpringBootApplication注解+自动装配原理+约定大于配置

1. SpringBootApplication注解 SpringBootApplication标注在某个类上说明这个类是SpringBoot的主配置类&#xff0c;SpringBoot就通过运行这个类的main方法来启动SpringBoot应用&#xff1b; 并且Configuration注解中也有Component注解&#xff0c;所以这个主启动类/主配置类…
阅读更多...
音视频入门知识（二）、图像篇

音视频入门知识（二）、图像篇

⭐二、图像篇 视频基本要素&#xff1a;宽、高、帧率、编码方式、码率、分辨率 ​ 其中码率的计算&#xff1a;码率(kbps)&#xff1d;文件大小(KB)&#xff0a;8&#xff0f;时间(秒)&#xff0c;即码率和视频文件大小成正比 YUV和RGB可相互转换 ★YUV&#xff08;原始数据&am…
阅读更多...
CTFshow—爆破

CTFshow—爆破

Web21 直接访问页面的话会弹窗需要输入密码验证&#xff0c;抓个包看看&#xff0c;发现是Authorization认证&#xff0c;Authorization请求头用于验证是否有从服务器访问所需数据的权限。 把Authorization后面的数据进行base64解码&#xff0c;就是我们刚刚输入的账号密码。 …
阅读更多...
lin.security提权靶场渗透

lin.security提权靶场渗透

声明&#xff01; 学习视频来自B站up主 **泷羽sec** 有兴趣的师傅可以关注一下&#xff0c;如涉及侵权马上删除文章&#xff0c;笔记只是方便各位师傅的学习和探讨&#xff0c;文章所提到的网站以及内容&#xff0c;只做学习交流&#xff0c;其他均与本人以及泷羽sec团队无关&a…
阅读更多...
【魅力golang】之-泛型

【魅力golang】之-泛型

早期的golang版本是不支持泛型的&#xff0c;这对于从其它语言转型做go开发的程序员来说&#xff0c;非常不友好&#xff0c;自 1.18开始golang正式支持泛型&#xff0c;解决了开发者在编写通用代码时的需求。泛型通过类型参数允许函数和数据结构支持多种类型&#xff0c;从而提…
阅读更多...
数据结构（Java）——链表

数据结构（Java）——链表

1.概念及结构 链表是一种 物理存储结构上非连续 存储结构&#xff0c;数据元素的 逻辑顺序 是通过链表中的 引用链接 次序实现的 。 2.分类 链表的结构非常多样&#xff0c;以下情况组合起来就有 8 种链表结构&#xff1a; &#xff08;1&#xff09;单向或者双向 &#xff08;…
阅读更多...
pdf有密码，如何实现pdf转换word？

pdf有密码，如何实现pdf转换word？

PDF想要转换成其他格式&#xff0c;但是当我们将文件拖到PDF转换器进行转换的时候发现PDF文件带有密码怎么办&#xff1f;今天分享PDF有密码如何转换成word方法。 方法一、 PDF文件有两种密码&#xff0c;打开密码和限制编辑&#xff0c;如果是因为打开密码&#xff0c;建议使…
阅读更多...
C++ 面向对象编程：继承中构造与析构函数顺序、继承中的同名属性访问、继承中的同名函数访问

C++ 面向对象编程：继承中构造与析构函数顺序、继承中的同名属性访问、继承中的同名函数访问

在继承中&#xff0c;构造链中&#xff0c;先构造的后析构 见以下代码示例&#xff1a; #include<iostream> using namespace std;class animal1 { public:animal1() {cout << "animal1 构造" << endl;}~animal1() {cout << "animal1…
阅读更多...
Springboot项目下面使用Vue3 + ElementPlus搭建侧边栏首页

Springboot项目下面使用Vue3 + ElementPlus搭建侧边栏首页

Springboot项目下面、在html 页面 Vue3 ElementPlus 搭建侧边栏首页 1、效果图 2、static 文件下面的项目结构 3、代码实现 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>首页</title><…
阅读更多...
Segment Routing Overview

Segment Routing Overview

大家觉得有意义和帮助记得及时关注和点赞!!! Segment Routing (SR) 是近年来网络领域的一项新技术&#xff0c;“segment” 在这里 指代网络隔离技术&#xff0c;例如 MPLS。如果快速回顾网络设计在过去几十年的 发展&#xff0c;我们会发现 SR 也许是正在形成的第三代网络设计…
阅读更多...
USB 状态机及状态转换

USB 状态机及状态转换

文章目录 USB 状态机及状态转换连接状态供电状态默认状态地址状态配置状态挂起状态USB 状态机及状态转换 枚举完成之前，USB 设备要经过一系列的状态变化，才能最终完成枚举。这些状态是 连接状态 - attached供电状态 - powered默认状态 - default地址状态 - address配置状态 -…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023