要模仿微信聊天界面,我们需要考虑以下几个方面:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>微信聊天界面</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div id="chat-container">
<div id="messages"></div>
<input type="text" id="message-input" placeholder="输入消息...">
<button id="send-button">发送</button>
</div>
<script src="script.js"></script>
</body>
</html>
#chat-container {
width: 100%;
max-width: 600px;
margin: 0 auto;
padding: 20px;
border: 1px solid #ccc;
}
#messages {
height: 400px;
overflow-y: auto;
padding: 10px;
border-bottom: 1px solid #ccc;
}
.message {
margin: 5px;
padding: 8px;
border-radius: 15px;
}
.user-message {
background-color: #07c160;
color: white;
align-self: flex-end;
}
.bot-message {
background-color: #f0f0f0;
color: black;
align-self: flex-start;
}
#message-input {
width: calc(100% - 62px);
padding: 10px;
}
#send-button {
width: 50px;
padding: 10px;
}
document.getElementById('send-button').addEventListener('click', sendMessage);
document.getElementById('message-input').addEventListener('keypress', function(e) {
if (e.key === 'Enter') {
sendMessage();
}
});
function sendMessage() {
const input = document.getElementById('message-input');
const message = input.value.trim();
if (message !== '') {
const messagesContainer = document.getElementById('messages');
const messageElement = document.createElement('div');
messageElement.classList.add('message', 'user-message');
messageElement.textContent = message;
messagesContainer.appendChild(messageElement);
input.value = '';
messagesContainer.scrollTop = messagesContainer.scrollHeight;
}
}
// 模拟接收消息
setInterval(() => {
const messagesContainer = document.getElementById('messages');
const botMessage = document.createElement('div');
botMessage.classList.add('message', 'bot-message');
botMessage.textContent = '你好!这是自动回复。';
messagesContainer.appendChild(botMessage);
messagesContainer.scrollTop = messagesContainer.scrollHeight;
}, 5000);
scrollTop = scrollHeight
确保滚动条始终在最底部。通过以上步骤和代码示例,你可以创建一个基本的微信聊天界面模拟。根据实际需求,还可以进一步扩展功能,如添加用户头像、时间戳、表情支持等。
没有搜到相关的沙龙