创建微信聊天框
在本文中，我们将一步步地讲解如何使用 JavaScript 创建一个基本的微信聊天框。
一、HTML结构首先，我们需要定义 HTML 结构。我们会创建两个主要区域：左侧的联系人列表和右侧的聊天窗口。
```html
- 联系人1
- 联系人2
- 联系人3
```
二、JavaScript逻辑接下来，我们需要编写 JavaScript 逻辑来实现聊天框的功能。
```javascript// 获取元素const contactList = document.getElementById('contact-list');
const chatWindow = document.getElementById('chat-window');
const messageInput = document.getElementById('message-input');
const sendButton = document.getElementById('send-button');
const chatLog = document.getElementById('chat-log');
// 联系人列表数据const contacts = [
{ id:1, name: '联系人1' },
{ id:2, name: '联系人2' },
{ id:3, name: '联系人3' }
];
// 聊天记录数据let chatRecords = [];
// 初始化联系人列表contacts.forEach((contact) => {
const li = document.createElement('li');
li.textContent = contact.name;
contactList.appendChild(li);
});
// 发送消息事件处理函数sendButton.addEventListener('click', () => {
const message = messageInput.value.trim();
if (message !== '') {
// 添加聊天记录 chatRecords.push({ type: 'sent', content: message });
// 更新聊天窗口 updateChatWindow(chatRecords);
// 清空输入框 messageInput.value = '';
}
});
// 接收消息事件处理函数contactList.addEventListener('click', (event) => {
if (event.target.tagName === 'LI') {
const contactId = parseInt(event.target.textContent.match(/d+/)[0]);
const message = `您收到来自${contacts.find((c) => c.id === contactId).name}的消息：`;
// 添加聊天记录 chatRecords.push({ type: 'received', content: message });
// 更新聊天窗口 updateChatWindow(chatRecords);
}
});
// 更新聊天窗口函数function updateChatWindow(records) {
const logHtml = records.map((record, index) => {
if (record.type === 'sent') {
return `
${record.content}
`;} else {
return `
${record.content}
`;}
}).join('');
chatLog.innerHTML = logHtml;
}
```
三、样式和效果最后，我们需要添加一些样式来美化聊天框的外观。
```css/*样式*/
.contact-list {
width:200px;
height:600px;
border:1px solid ccc;
float: left;
}
.chat-window {
width:400px;
height:600px;
border:1px solid ccc;
margin-left:210px;
}
.sent {
background-color: f0f0f0;
padding:10px;
border-bottom:1px solid ccc;
}
.received {
background-color: f5f5f5;
padding:10px;
border-bottom:1px solid ccc;
}
```
四、总结在本文中，我们一步步地讲解了如何使用 JavaScript 创建一个基本的微信聊天框。我们定义了 HTML 结构，编写了 JavaScript 逻辑，并添加了样式来美化外观。通过阅读本文，你应该能够创建出类似于微信聊天框的应用程序。
