Skip to content

Commit 6f8688d

Browse files
CommandstoneCommandstone
authored
Update chat.html
1 parent 9b22522 commit 6f8688d

File tree

1 file changed

+87
-66
lines changed

1 file changed

+87
-66
lines changed

‎chat/chat.html‎

Lines changed: 87 additions & 66 deletions
Original file line numberDiff line numberDiff line change
@@ -2,27 +2,32 @@
22
<html lang="zh-CN">
33
<head>
44
<meta charset="UTF-8">
5-
<title>渐变聊天室</title>
5+
<title>多用户聊天室</title>
66
<style>
7+
:root {
8+
--primary-color: #4ecdc4;
9+
--secondary-color: #f9d423;
10+
}
11+
712
* {
813
margin: 0;
914
padding: 0;
1015
box-sizing: border-box;
11-
font-family: 'Microsoft YaHei', sans-serif;
16+
font-family: 'Segoe UI', sans-serif;
1217
}
1318

1419
body {
15-
background: linear-gradient(135deg, #f9d423 0%, #4ecdc4 100%);
20+
background: linear-gradient(135deg, var(--secondary-color), var(--primary-color));
1621
min-height: 100vh;
22+
padding: 20px;
1723
}
1824

1925
.chat-container {
2026
max-width: 800px;
21-
margin: 20px auto;
27+
margin: 0 auto;
2228
background: rgba(255, 255, 255, 0.9);
2329
border-radius: 15px;
2430
box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
25-
overflow: hidden;
2631
height: 90vh;
2732
display: flex;
2833
flex-direction: column;
@@ -32,133 +37,149 @@
3237
flex: 1;
3338
padding: 20px;
3439
overflow-y: auto;
40+
display: flex;
41+
flex-direction: column;
3542
}
3643

3744
.message {
3845
max-width: 70%;
39-
margin-bottom: 15px;
40-
padding: 12px 18px;
41-
border-radius: 20px;
42-
animation: fadeIn 0.3s ease;
43-
word-break: break-word;
46+
margin: 10px;
47+
padding: 15px;
48+
border-radius: 15px;
49+
animation: slideIn 0.3s ease;
50+
position: relative;
51+
}
52+
53+
.user-message {
54+
background: var(--primary-color);
55+
color: white;
56+
align-self: flex-end;
4457
}
4558

46-
.received {
59+
.other-message {
4760
background: #f1f1f1;
4861
align-self: flex-start;
4962
}
5063

51-
.sent {
52-
background: #4ecdc4;
53-
color: white;
54-
align-self: flex-end;
64+
.message-info {
65+
display: flex;
66+
justify-content: space-between;
67+
font-size: 0.8em;
68+
margin-bottom: 5px;
5569
}
5670

5771
.input-area {
5872
padding: 20px;
5973
background: rgba(255, 255, 255, 0.95);
60-
border-top: 1px solid #eee;
74+
border-top: 1px solid #ddd;
6175
display: flex;
6276
gap: 10px;
6377
}
6478

65-
input {
66-
flex: 1;
79+
input, select {
6780
padding: 12px;
68-
border: 2px solid #4ecdc4;
81+
border: 2px solid var(--primary-color);
6982
border-radius: 25px;
7083
outline: none;
71-
font-size: 16px;
7284
}
7385

7486
button {
7587
padding: 12px 25px;
76-
background: #4ecdc4;
88+
background: var(--primary-color);
7789
border: none;
7890
border-radius: 25px;
7991
color: white;
8092
cursor: pointer;
81-
transition: all 0.3s ease;
93+
transition: 0.3s;
8294
}
8395

8496
button:hover {
8597
background: #3db3ab;
8698
transform: translateY(-2px);
8799
}
88100

89-
@keyframes fadeIn {
101+
@keyframes slideIn {
90102
from {
91103
opacity: 0;
92-
transform: translateY(10px);
104+
transform: translateY(20px);
93105
}
94106
to {
95107
opacity: 1;
96108
transform: translateY(0);
97109
}
98110
}
99-
100-
/* 滚动条样式 */
101-
::-webkit-scrollbar {
102-
width: 8px;
103-
}
104-
105-
::-webkit-scrollbar-track {
106-
background: rgba(0, 0, 0, 0.1);
107-
}
108-
109-
::-webkit-scrollbar-thumb {
110-
background: #4ecdc4;
111-
border-radius: 4px;
112-
}
113111
</style>
114112
</head>
115113
<body>
116114
<div class="chat-container">
117-
<div class="messages" id="messages">
118-
<!-- 示例消息 -->
119-
<div class="message received">你好！有什么可以帮你的？</div>
120-
<div class="message sent">你好！这个界面真漂亮</div>
121-
</div>
115+
<div class="messages" id="messages"></div>
122116
<div class="input-area">
123-
<input type="text" id="messageInput" placeholder="输入消息..." />
117+
<select id="userSelect">
118+
<option value="user1">用户1</option>
119+
<option value="user2">用户2</option>
120+
</select>
121+
<input type="text" id="messageInput" placeholder="输入消息...">
124122
<button onclick="sendMessage()">发送</button>
125123
</div>
126124
</div>
127125

128126
<script>
129127
const messagesContainer = document.getElementById('messages');
130128
const messageInput = document.getElementById('messageInput');
129+
const userSelect = document.getElementById('userSelect');
130+
131+
// 初始化消息存储
132+
let messages = JSON.parse(localStorage.getItem('chatMessages')) || [];
131133

132-
// 发送消息函数
133-
function sendMessage() {
134-
const message = messageInput.value.trim();
135-
if (message) {
136-
// 添加发送的消息
137-
addMessage(message, 'sent');
138-
// 清空输入框
139-
messageInput.value = '';
140-
// 模拟回复
141-
setTimeout(() => {
142-
addMessage('已收到你的消息：' + message, 'received');
143-
}, 1000);
144-
}
134+
// 加载历史消息
135+
function loadMessages() {
136+
messagesContainer.innerHTML = '';
137+
messages.forEach(msg => {
138+
createMessageElement(msg);
139+
});
145140
}
146141

147-
// 添加消息到界面
148-
function addMessage(text, type) {
142+
// 创建消息元素
143+
function createMessageElement(msg) {
149144
const messageDiv = document.createElement('div');
150-
messageDiv.className = `message ${type}`;
151-
messageDiv.textContent = text;
145+
messageDiv.className = `message ${msg.sender === 'user1' ? 'user-message' : 'other-message'}`;
146+
147+
const time = new Date(msg.timestamp).toLocaleTimeString();
148+
messageDiv.innerHTML = `
149+
<div class="message-info">
150+
<span>${msg.sender}</span>
151+
<span>${time}</span>
152+
</div>
153+
<div>${msg.content}</div>
154+
`;
155+
152156
messagesContainer.appendChild(messageDiv);
153-
// 自动滚动到底部
154157
messagesContainer.scrollTop = messagesContainer.scrollHeight;
155158
}
156159

157-
// 回车发送功能
158-
messageInput.addEventListener('keypress', (e) => {
159-
if (e.key === 'Enter') {
160-
sendMessage();
160+
// 发送消息
161+
function sendMessage() {
162+
const content = messageInput.value.trim();
163+
if (content) {
164+
const message = {
165+
sender: userSelect.value,
166+
content: content,
167+
timestamp: new Date().getTime()
168+
};
169+
170+
messages.push(message);
171+
localStorage.setItem('chatMessages', JSON.stringify(messages));
172+
createMessageElement(message);
173+
messageInput.value = '';
161174
}
175+
}
176+
177+
// 初始化加载消息
178+
loadMessages();
179+
180+
// 回车发送
181+
messageInput.addEventListener('keypress', (e) => {
182+
if (e.key === 'Enter') sendMessage();
162183
});
163184
</script>
164185
</body>

0 commit comments

Comments
 (0)