原生js模拟微信聊天记录

原生JS模拟微信聊天记录

前言在移动端应用中，微信聊天记录的界面设计是非常典型的。今天，我们将使用原生JavaScript来模拟一个简单的微信聊天记录界面。

HTML结构首先，我们需要定义HTML结构。我们会创建一个`container`容器，包含一个`chat-list`列表和一个`input`输入框。

```html

```

JavaScript逻辑接下来，我们需要编写JavaScript逻辑来实现聊天记录的功能。我们会使用`DOM`操作来创建和删除列表项。

```javascript// 获取元素const chatList = document.getElementById('chat-list');

const input = document.getElementById('input');

// 定义函数function createChatItem(data) {

const item = document.createElement('li');

item.classList.add('chat-item');

const avatar = document.createElement('img');

avatar.src = data.avatar;

avatar.alt = '头像';

const content = document.createElement('div');

content.textContent = data.content;

item.appendChild(avatar);

item.appendChild(content);

return item;

}

function addChatItem(data) {

const item = createChatItem(data);

chatList.appendChild(item);

// 滚动到底部 chatList.scrollTop = chatList.scrollHeight;

}

// 监听输入框事件input.addEventListener('input', (e) => {

if (e.target.value.trim() !== '') {

addChatItem({

avatar: ' content: e.target.value,

});

// 清空输入框 input.value = '';

}

});

// 初始化数据addChatItem({

avatar: ' content: 'Hello, World!',

});

```

结论通过以上的代码，我们成功地实现了一个简单的微信聊天记录界面。用户可以输入内容并发送消息，系统会自动创建和删除列表项来展示聊天记录。

当然，这只是一个基本的例子，你可以根据自己的需求进行扩展和修改。

聊天微信csshtml5JavaScript