一:效果展示
二:源代码分享
<!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 lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>关键字自动回复</title>
<style>
</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>
</script>
</body>
</html>
<head>
部分:定义了文档的元数据,包括窗口设置和标题,以及内嵌的CSS
样式。<body>
部分:包含一个聊天容器,其中包括聊天标题、聊天窗口和输入容器。
2.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;
}
- 布局与对齐:使用
Flexbox
布局来实现元素的居中对齐和分布,使得聊天界面在不同设备上都能保持良好的显示效果。 - 样式与主题:通过颜色和背景的设置,区分用户消息和机器人消息,增强用户体验。使用圆角、边距和内边距来增加视觉层次和舒适度。
- 响应式设计:通过设置最大高度和允许滚动,确保聊天窗口在内容过多时不会破坏页面的整体布局。
3.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 {
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;
}
});