<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chat聊天</title>
<style>
body, html {
height: 100%;
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
display: flex;
flex-direction: column;
background-color: #f7f7f7;
}
#chat-container {
flex: 1;
display: flex;
flex-direction: column;
padding: 20px;
overflow-y: auto;
}
.message {
display: flex;
margin-bottom: 10px;
}
.message .bubble {
background-color: #0d66fe;
color: white;
padding: 10px;
border-radius: 15px;
max-width: 70%;
word-wrap: break-word;
}
.message .time {
color: #888;
font-size: 12px;
margin-left: 5px;
}
.input-container {
display: flex;
padding: 10px;
background-color: white;
box-shadow: 0 -1px 5px rgba(0,0,0,0.1);
}
#message-input {
flex: 1;
padding: 10px;
border: none;
outline: none;
}
#send-button {
padding: 10px 20px;
background-color: #0d66fe;
color: white;
border: none;
cursor: pointer;
outline: none;
}
</style>
</head>
<body>
<div id="chat-container"></div>
<div class="input-container">
<input type="text" id="message-input" placeholder="输入消息...">
<button id="send-button">发送</button>
</div>
<script>
const chatContainer = document.getElementById('chat-container');
const messageInput = document.getElementById('message-input');
const sendButton = document.getElementById('send-button');
function displayMessage(content) {
const messageElement = document.createElement('div');
messageElement.className = 'message';
const bubble = document.createElement('div');
bubble.className = 'bubble';
bubble.textContent = content;
messageElement.appendChild(bubble);
const time = new Date();
const timeElement = document.createElement('div');
timeElement.className = 'time';
timeElement.textContent = time.getHours() + ':' + time.getMinutes().toString().padStart(2, '0');
messageElement.appendChild(timeElement);
chatContainer.appendChild(messageElement);
chatContainer.scrollTop = chatContainer.scrollHeight; // Scroll to bottom
}
sendButton.addEventListener('click', () => {
const message = messageInput.value.trim();
if (message) {
displayMessage(message);
messageInput.value = '';
}
});
messageInput.addEventListener('keyup', (e) => {
if (e.key === 'Enter') {
sendButton.click();
}
});
</script>
</body>
</html>
09-01
298
07-01
1万+