仿微信聊天界面的实现
前言本文将详细描述如何使用 JavaScript 实现一个简单的仿微信聊天界面，包括实现固定的聊天回复功能和正在输入功能。
HTML结构首先，我们需要创建一个基本的HTML结构来容纳我们的聊天界面。
```html
```
JavaScript实现接下来，我们需要在JavaScript中实现聊天界面的逻辑。
```javascript//获取元素const chatLog = document.getElementById('chat-log');
const chatInput = document.getElementById('chat-input');
const sendBtn = document.getElementById('send-btn');
//定义回复内容let replyContent = [
'你好！',
'很高兴与你聊天！',
'我是机器人，很乐意为你服务！',
'有什么问题吗？',
'再见！'
];
//实现正在输入功能const inputTimer = setInterval(() => {
const inputVal = chatInput.value;
if (inputVal) {
//显示正在输入的效果 chatLog.innerHTML += '
} else {
clearInterval(inputTimer);
}
},100);
//实现发送功能sendBtn.addEventListener('click', () => {
const inputVal = chatInput.value;
if (inputVal) {
//显示聊天记录 chatLog.innerHTML += `
//回复内容 const reply = replyContent[Math.floor(Math.random() * replyContent.length)];
chatLog.innerHTML += `
//清空输入框 chatInput.value = '';
}
});
```
效果实现的效果有：
1. 实现仿微信的聊天界面：创建一个基本的HTML结构，包含一个聊天记录区域和一个输入框。
2. 实现仿微信的正在输入功能：使用JavaScript的setInterval函数，每隔100毫秒检查输入框的值，如果有值，则显示正在输入的效果。
总结本文详细描述了如何使用JavaScript实现一个简单的仿微信聊天界面，包括实现固定的聊天回复功能和正在输入功能。
