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

news/2024/12/28 5:33:04/

一:效果展示

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

二:源代码分享

html"><!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>关键字自动回复</title><style>html" title=css>css">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">自动回复html" 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>html" title=javascript>javascript">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'; // html" title=机器人>机器人头像链接messageContent.insertBefore(avatar, text); }messageElement.appendChild(messageContent);chatWindow.appendChild(messageElement);chatWindow.scrollTop = chatWindow.scrollHeight;}});</script>
</body>
</html>

三:代码分析

1.HTML结构
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>html" title=css>css">/* CSS样式在这里定义,用于美化页面 */</style>
</head>
<body><!-- 定义一个容器,用于包含聊天界面的所有元素 --><div class="chat-container"><!-- 定义聊天窗口的标题 --><div class="chat-title">自动回复html" 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>html" title=javascript>javascript">// JavaScript代码在这里,用于实现页面的交互功能</script>
</body>
</html>
  • <head>部分:定义了文档的元数据,包括窗口设置和标题,以及内嵌的CSS样式。
  • <body>部分:包含一个聊天容器,其中包括聊天标题、聊天窗口和输入容器。
2.CSS结构
html" title=css>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;/* 将html" title=机器人>机器人消息左对齐 */color: #28a745;/* 设置html" title=机器人>机器人消息文本颜色为绿色 */
}.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;/* 设置html" title=机器人>机器人消息背景颜色为浅绿色 */
}.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布局来实现元素的居中对齐和分布,使得聊天界面在不同设备上都能保持良好的显示效果。
  • 样式与主题:通过颜色和背景的设置,区分用户消息和html" title=机器人>机器人消息,增强用户体验。使用圆角、边距和内边距来增加视觉层次和舒适度。
  • 响应式设计:通过设置最大高度和允许滚动,确保聊天窗口在内容过多时不会破坏页面的整体布局。
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.ppmy.cn/news/1558705.html

相关文章

Bash语言的语法

Bash语言简介与应用 Bash&#xff08;Bourne Again SHell&#xff09;是一种Unix Shell和命令语言&#xff0c;在Linux、macOS及其他类Unix系统中被广泛使用。作为GNU项目的一部分&#xff0c;Bash不仅是对早期Bourne Shell的增强&#xff0c;还引入了许多特性和功能&#xff…

Nginx的性能分析与调优简介

Nginx的性能分析与调优简介 一、Nginx的用途二、Nginx负载均衡策略介绍与调优三、其他调优方式简介四、Nginx的性能监控 一、Nginx的用途 ‌Nginx是一种高性能的HTTP和反向代理服务器&#xff0c;最初作为HTTP服务器开发&#xff0c;主要用于服务静态内容如HTML文件、图像、视…

Vue零基础教程|从前端框架到GIS开发系列课程(七)响应式系统介绍

前文指路&#xff1a;《Vue零基础教程》&#xff0c;从前端框架到GIS开发系列课程 Vue零基础教程|从前端框架到GIS开发系列课程&#xff08;二&#xff09; Vue零基础教程|从前端框架到GIS开发系列课程&#xff08;三&#xff09;模板语法 Vue零基础教程|从前端框架到GIS开发…

【test】git clone lfs问题记录

Git Large File Storage (LFS) 是 Git 的一个扩展&#xff0c;它替代 Git 来管理大型文件&#xff0c;比如音频、视频、图形文件和其他二进制大对象&#xff08;blobs&#xff09;。Git LFS 通过将这些大文件的指针存储在本地仓库中&#xff0c;并把实际文件存储在一个单独的服…

力扣面试题 - 40 迷路的机器人 C语言解法

题目&#xff1a; 设想有个机器人坐在一个网格的左上角&#xff0c;网格 r 行 c 列。机器人只能向下或向右移动&#xff0c;但不能走到一些被禁止的网格&#xff08;有障碍物&#xff09;。设计一种算法&#xff0c;寻找机器人从左上角移动到右下角的路径。 网格中的障碍物和空…

龙智出席2024零跑智能汽车技术论坛,分享功能安全、需求管理、版本管理、代码扫描等DevSecOps落地实践

龙智快讯 2024年12月5日&#xff0c;由零跑和盖世汽车主办的“2024零跑智能汽车技术论坛”在杭州零跑总部圆满落幕。此次技术论坛聚焦AI语言大模型、AUTOSAR AP平台、DevOps、端到端自动驾驶等热点话题展开探讨&#xff0c;旨在推动智能汽车技术的创新与发展。 龙智作为国内领先…

Android Studio | 连接手机设备后,启动App时出现:Waiting For DebuggerApplication (App名)...

在这种情况下&#xff0c;打开目录文件&#xff0c;出现 Is:/storage/emulated/: Permission denied 问题分析&#xff1a; 以上两种情况表明应用程序试图访问Android设备的存储空间中的/storage/emulated/目录&#xff0c;但是没有足够的权限去执行这个操作。 解决办法&…

目前最流行的 Rust Web 框架有哪些?

目前最流行的 Rust Web 框架有哪些? 1. Actix Web:高性能之王,老牌框架 特点: 高性能:基于 Actor 模型,是目前 Rust 生态中最成熟、性能最强的 Web 框架之一。功能强大:支持 HTTP/1.x、HTTP/2、WebSocket 等,内置中间件和多种插件。社区支持广泛:拥有大量使用者,资料…