怎么讲解网站,杭州关键词优化服务,域名和网站空间,自己做的网站怎么取sql数据库一#xff1a;效果展示 本项目实现了一个简单的网页聊天界面#xff0c;用户可以在输入框中输入消息#xff0c;并点击发送按钮或按下回车键来发送消息。机器人会根据用户发送的消息内容#xff0c;通过关键字匹配来生成自动回复。 二#xff1a;源代码分享
!DOCTYP…一效果展示 本项目实现了一个简单的网页聊天界面用户可以在输入框中输入消息并点击发送按钮或按下回车键来发送消息。机器人会根据用户发送的消息内容通过关键字匹配来生成自动回复。 二源代码分享
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title关键字自动回复/titlestylebody {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
bodydiv classchat-containerdiv classchat-title自动回复机器人/divdiv classchat-window idchatWindow/divdiv classinput-containerinput typetext iduserInput placeholder请输入......button idsendButton发送/button/div/divscriptdocument.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 langen
headmeta charsetUTF-8!-- 设置视口使页面在移动设备上以合适的比例显示宽度等于设备宽度初始缩放比例为1 --meta nameviewport contentwidthdevice-width, initial-scale1.0!-- 设置网页的标题 --title关键字自动回复/titlestyle/* CSS样式在这里定义,用于美化页面 *//style
/head
body!-- 定义一个容器用于包含聊天界面的所有元素 --div classchat-container!-- 定义聊天窗口的标题 --div classchat-title自动回复机器人/div!-- 定义聊天窗口用于显示聊天内容设置id以便JS操作 --div classchat-window idchatWindow/div!-- 定义一个容器包含输入框和发送按钮 --div classinput-container!-- 定义一个文本输入框用户在此输入信息 --input typetext iduserInput placeholder请输入...... !-- 定义一个按钮用户点击后发送输入框中的内容 --button idsendButton发送/button /div/divscript// JavaScript代码在这里用于实现页面的交互功能/script
/body
/htmlhead部分定义了文档的元数据包括窗口设置和标题以及内嵌的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)) {// 如果消息包含你好或hireturn 你好有什么我可以帮助你的吗;// 返回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;// 将聊天窗口滚动到最底部以便显示最新消息}
});
